$theme-name: 'blue' !default;

$ui-transitions: true !default;

// Sync with JavaScript variable: UI_TRANSITION_DURATION.
$ui-transition-duration: .3s !default;

// Sprite path
$sprite-path: '../img/icon-sprite.svg?20200407';
$browser-sprite-path: '../img/browser-sprite.png?20200407';

@import "utils/mixins";

@import "base/reset";
@import "base/colors";
@import "base/typography";
@import "base/common";

@import "utils/scrollable";

@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";

@import "components/form-search";
@import "components/menu-main";
@import "components/menu-user";
@import "components/message-box";

.link-action {
	border-bottom: 1px dotted;
	cursor: pointer;
	color: $font-color;

	&:visited {
		@extend %link-action-style;
	}

	&:hover {
		@extend %link-action-style;
		color: $link-hover-color;
		border-bottom: 1px solid rgba($link-hover-color, .35);
	}

	&:active {
		@extend %link-action-style;
	}

	&:focus {
		outline: none;
		border-bottom: 2px solid rgba($link-hover-color, .35);
	}
}

%link-action-style {
	border-bottom: 1px dotted;
	text-decoration: none;
}

.link-alt {
	text-decoration: none;
	cursor: pointer;

	&:link {
		border-bottom: 1px solid rgba($link-alt-underline-color, .35);
	}

	&:visited {
		border-bottom: 1px solid rgba($link-alt-underline-color, .35);
	}

	&:hover {
		color: $link-hover-color;
		border-bottom: 1px solid rgba($link-hover-color, .5);
	}

	&:focus {
		color: $link-hover-color;
		outline: none;
		border-bottom: 2px solid rgba($link-hover-color, .35);
	}

	&:active {
		color: $link-active-color;
		border-bottom: 1px solid rgba($link-active-color, .5);
	}
}

.disabled {
	cursor: default !important;
	opacity: .35;
	background-color: transparent;

	.subfilter-enabled {
		color: darken($ui-bg-selected-color, 35%);
	}

	.subfilter-disable-btn {
		cursor: default;
		color: darken($ui-bg-selected-color, 25%);
		background-color: $ui-bg-selected-color;

		&:hover,
		&:focus,
		&:active {
			color: darken($ui-bg-selected-color, 25%);
		}
	}

	.disabled,
	[disabled] {
		opacity: 1 !important;
	}
}

.monospace-font {
	font-family: $font-stack-mono;
}

%space-pre-wrap {
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: break-word;
}

.arrow-up {
	@extend %arrow;
	border: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 6px solid $font-color;
}

.arrow-down {
	@extend %arrow;
	border: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 6px solid $font-color;
}

.arrow-left {
	@extend %arrow;
	border-bottom: 4px solid transparent;
	border-top: 4px solid transparent;
	border-right: 6px solid $font-color;
}

.arrow-right {
	@extend %arrow;
	border-bottom: 4px solid transparent;
	border-top: 4px solid transparent;
	border-left: 6px solid $font-color;
}

%arrow {
	display: inline-block;
	height: 0;
	width: 0;
	font-size: 0;
	line-height: 0;
}

.zabbix-logo {
	width: 114px;
	height: 30px;
	background: url($sprite-path) no-repeat 0 -864px;
}

.zabbix-sidebar-logo {
	width: 91px;
	height: 24px;
	background: url($sprite-path) no-repeat -570px -400px;
}

.zabbix-sidebar-logo-compact {
	width: 24px;
	height: 24px;
	background: url($sprite-path) no-repeat -540px -400px;
}

.object-group {
	min-height: 24px;
	line-height: 24px;
	padding: 10px 0 6px;
	position: relative;
	vertical-align: top;
}

.dashbrd-edit {
	background-color: $ui-bg-color;
	box-shadow: 0 0 0 4px $ui-bg-color;
	display: inline-block;
	margin-right: 5px;
	position: relative;

	&::after {
		content: '';
		position: absolute;
		min-height: 24px;
		z-index: -1;
		top: -5px;
		right: -5px;
		bottom: -5px;
		left: -5px;
		border: 1px solid $ui-border-color;
	}

	ul {
		li {
			vertical-align: middle;

			&:first-child {
				padding: 0;
			}

			.btn-dashbrd-conf {
				vertical-align: middle;
			}
		}
	}
}

// Object group navigation.
.object-group {
	margin-bottom: -1px;

	li {
		float: left;
		margin-right: 5px;

		span {
			display: inline-block;
			padding: 0 7px;
		}

		.status-container,
		.rel-container {
			margin: 0 5px 0 0;

			span {
				padding: 2px 3px 1px;
			}
		}

		.rel-container {
			margin: 0;
		}
	}

	.selected {
		background-color: $ui-bg-color;
		border-radius: 2px;
		box-shadow: inset 0 0 0 1px $ui-border-color;
	}

	.arrow-right {
		border-left-color: $font-color;
	}

	button {
		line-height: 22px;
	}

	.btn-link {
		line-height: 14px;
	}
}

.hor-list {
	li {
		display: inline-block;
		margin: 0 6px 0 0;

		&:last-child {
			margin: 0;
		}
	}

	.object-group {
		margin: 0;
	}
}

// Breadcrumbs inline with filter block.
.filter-breadcrumb {
	display: inline-block;
	padding-top: 0;
	z-index: 3;
	max-width: calc(100vw - 200px);

	li {
		line-height: 14px;
		vertical-align: top;
		float: none;
		display: inline-block;

		.status-container {
			padding-top: 3px;
		}

		> span {
			display: inline-block;
			height: 18px;
			padding: 4px 7px 0;
			line-height: 14px;

			a {
				display: inline-block;
				max-width: 200px;
				overflow: hidden;
				text-overflow: ellipsis;
				vertical-align: top;
				margin-bottom: -1px;

				&:focus {
					margin-bottom: -2px;
				}
			}
		}
	}

	> li {
		padding: 1px 0;
		line-height: 22px;
		white-space: nowrap;

		.status-container {
			line-height: 14px;
		}

		> span {
			a {
				margin-top: 1px;
				line-height: 13px;
			}
		}
	}

	+ .filter-space {
		margin-top: -29px;
	}
}

// Tables.
.list-table {
	width: 100%;
	background-color: $ui-bg-color;
	border-collapse: separate;
	border: 1px solid $ui-border-color;

	.action-container {
		display: flex;
		width: 100%;

		.label {
			@extend %overflow-ellipsis;
		}

		.separator {
			margin-right: 4px;
		}

		[class*='icon-'] {
			flex-shrink: 0;
		}
	}

	&.compact-view {
		tr {
			&[class*='flh-'] {
				@if $theme-name == 'blue' {
					&:not(.row-selected):not(:hover) {
						td {
							color: $font-color;

							sup,
							a,
							.problem-unack-fg,
							.problem-ack-fg,
							.ok-unack-fg,
							.ok-ack-fg {
								color: $font-color;
								border-bottom-color: rgba($font-color, .5);
							}

							.tag {
								background-color: rgba($font-color, .5);
							}

							.icon-wzrd-action {
								background-position: -165px -624px;
							}

							button:focus {
								box-shadow: 0 0 0 2px rgba($font-color, .5);
							}
						}
					}
				}

				@if $theme-name == 'dark' {
					&:not(.row-selected):not(:hover) {
						td {
							color: #000000;

							sup,
							a,
							.problem-unack-fg,
							.problem-ack-fg,
							.ok-unack-fg,
							.ok-ack-fg {
								color: #000000;
								border-bottom-color: rgba(0, 0, 0, .5);
							}

							.icon-wzrd-action {
								background-position: -165px -624px;
							}

							button:focus {
								box-shadow: 0 0 0 2px rgba(0, 0, 0, .5);
							}
						}
					}
				}

				@if $theme-name == 'blue' or $theme-name == 'dark' {
					&:not(.row-selected):not(:hover) {
						td {
							[class*='icon-'] {
								background-color: $ui-bg-color;
								border-radius: 2px;
							}

							[class*='icon-depend-'],
							.icon-description,
							.icon-wzrd-action {
								background-color: transparent;
							}
						}
					}
				}
			}
		}

		.link-action {
			color: $font-color;

			&.red {
				color: $red;
			}

			&.orange {
				color: $orange;
			}

			&.yellow {
				color: $dark-yellow;
			}

			&.green {
				color: $green;
			}

			&:hover,
			&:focus {
				color: $link-hover-color;
			}
		}

		td {
			padding-top: 0;
			padding-bottom: 0;
			border-bottom: 0;
			box-shadow: inset 0 -1px 0 0 rgba($font-color, .1);
			color: $font-color;
			height: 22px;
			line-height: 1;
			vertical-align: middle;
			white-space: nowrap;

			[class*='icon-'] {
				vertical-align: middle;

				&::after {
					margin: 0;
					line-height: 14px;
				}

				&:last-of-type {
					margin-right: 0;
				}
			}

			[class*='icon-depend-'] {
				width: 12px;
				margin-right: 0;
			}

			.rel-container {
				span {
					margin: 0;
				}
			}

			.tag {
				display: inline-block;
				line-height: 16px;
				margin-right: 3px;
				padding: 0 3px;
				max-width: 40px;

				@media screen and (min-width: 1200px) {
					max-width: 71px;
				}

				@media screen and (min-width: 1400px) {
					max-width: 102px;
				}

				@media screen and (min-width: 1600px) {
					max-width: 133px;
				}
			}

			.icon-maint {
				position: relative;
				display: inline-block;
				height: 12px;
				width: 12px;
				margin: 3px 1px 2px 2px !important;

				&::before {
					height: 12px;
					width: 12px;
					background-position: -48px -804px;
				}
			}

			.icon-wzrd-action {
				background: url($sprite-path) no-repeat -6px -624px;
				height: 12px;
				min-height: 12px;
				margin: 0;
				position: relative;
			}

			.icon-description {
				margin-left: 2px;
			}
		}

		.action-container {
			height: 18px;
			line-height: 18px;

			.rel-container {
				display: flex;
			}

			.link-action {
				height: 16px;
				min-width: 1em;
			}

			.separator {
				flex-shrink: 0;
			}
		}
	}

	thead th {
		color: $font-alt-color;
		height: 100%;
		overflow: hidden;
		white-space: nowrap;
		padding: 6px 5px;
		vertical-align: bottom;
		border-bottom: 2px solid darken($table-border-color, 5%);
		text-align: left;

		&.column-tags-1 {
			width: 75px;
		}

		&.column-tags-2 {
			width: 124px;
		}

		&.column-tags-3 {
			width: 173px;
		}

		@media screen and (min-width: 1200px) {
			&.column-tags-1 {
				width: 106px;
			}

			&.column-tags-2 {
				width: 186px;
			}

			&.column-tags-3 {
				width: 266px;
			}
		}

		@media screen and (min-width: 1400px) {
			&.column-tags-1 {
				width: 137px;
			}

			&.column-tags-2 {
				width: 248px;
			}

			&.column-tags-3 {
				width: 359px;
			}
		}

		@media screen and (min-width: 1600px) {
			&.column-tags-1 {
				width: 168px;
			}

			&.column-tags-2 {
				width: 310px;
			}

			&.column-tags-3 {
				width: 452px;
			}
		}

		.arrow-up {
			margin: 0 0 0 3px;
			border-bottom-color: $font-alt-color;
		}

		.arrow-right {
			margin: 0 0 0 3px;
			border-left-color: $font-alt-color;
		}

		.arrow-down {
			margin: 0 0 0 3px;
			border-top-color: $font-alt-color;
		}

		.treeview {
			span {
				margin: 0;
			}
		}

		a {
			display: block;
			position: relative;
			margin: -1em;
			padding: 1em;
			border: 0;
			transition: background-color .2s ease-out;

			&:hover,
			&:focus,
			&:active {
				text-decoration: none;
				background-color: $ui-hover-color;
			}
		}
	}

	tbody tr {
		&:hover {
			background-color: $ui-hover-color;

			.timeline-axis {
				background-color: $ui-bg-color;
			}

			.timeline-date {
				background-color: $ui-bg-color;
			}

			.timeline-td {
				background-color: $ui-bg-color !important;
			}
		}

		&.row-selected {
			@extend %found-bg;

			.timeline-axis {
				background-color: $ui-bg-color;
			}

			.timeline-date {
				background-color: $ui-bg-color;
			}

			.timeline-td {
				background-color: $ui-bg-color;
			}
		}

		&.nothing-to-show {
			@extend %nothing-to-show;
		}

		&:last-child th,
		&:last-child td {
			border-bottom: 0;
		}

		&.hover-nobg {
			background-color: $ui-bg-color;
		}
	}

	tbody th,
	td {
		padding: 6px 5px;
		position: relative;
		border-bottom: 1px solid $table-border-color;
		line-height: 18px;
		vertical-align: top;
	}

	tbody th {
		text-align: left;
	}

	.vertical_rotation_inner {
		transform: rotate(270deg);
		white-space: nowrap;
	}

	.list-table-footer {
		border-bottom: 0;
		color: $font-alt-color;
		text-align: right;
	}

	.latest-values,
	.opdata {
		max-width: 300px;
	}
}

.table-paging {
	text-align: center;
	background-color: $ui-bg-color;
	margin-top: -1px;
	padding: 4px 5px;
	overflow: hidden;
	position: relative;
	border: 1px solid $ui-border-color;
	border-top-color: $table-border-color;

	a {
		@extend %paging-btn;
		&:focus {
			.arrow-right {
				border-left-color: $font-selected-color;
			}
			.arrow-left {
				border-right-color: $font-selected-color;
			}
		}
	}
}

.paging-btn-container {
	min-height: 24px;
	position: relative;
}

.table-stats {
	color: $font-alt-color;
	display: inline-block;
	padding: 4px 0;
	position: absolute;
	right: 5px;
}

.radio-switch {
	cursor: default;
	background-color: $form-bg-color;
	@extend %paging-btn;
}

%paging-btn {
	display: inline-block;
	margin-left: -1px;
	padding: 3px 11px;
	background-color: $btn-form-bg-color;
	border: 1px solid $form-border-color !important;
	text-decoration: none;
	color: $font-color;
	outline: 0;
	transition: background-color .2s ease-out;

	&:hover {
		color: $font-color;
		background-color: $btn-form-hover-color;
	}

	&:focus {
		@include btn-hover-active($btn-font-color, $btn-bg-color);
		z-index: 10;
		position: relative;
	}

	&:active {
		color: $font-color;
		background-color: $btn-form-hover-color;
		z-index: 10;
		position: relative;
	}

	&:first-of-type {
		border-radius: 2px 0 0 2px;
	}

	&:last-of-type {
		border-radius: 0 2px 2px 0;
	}

	&.paging-selected {
		color: $font-selected-color;
		background-color: $ui-bg-selected-color;
		position: relative;
		z-index: 1;

		&:hover {
			background-color: darken($ui-bg-selected-color, 4%);
		}

		&:focus {
			@include btn-hover-active($btn-font-color, $btn-bg-color);
			position: relative;
		}

		&:active {
			background-color: darken($ui-bg-selected-color, 4%);
			position: relative;
		}
	}
}

.treeview-plus {
	font: {
		size: $font-top-nav-size;
		weight: bold;
	}
	display: inline-block;
	background-color: $ui-bg-color;
	border: 1px solid $form-border-color;
	border-radius: 2px;
	cursor: pointer;
	width: 12px;
	height: 12px;
	line-height: 12px;
	text-align: center;

	&:link,
	&:visited,
	&:hover,
	&:focus,
	&:active {
		color: $font-color;
	}

	&:hover {
		background-color: $ui-hover-color;
		border-bottom-color: $form-border-color;
	}

	&:focus {
		background-color: $ui-hover-color;
		border-color: $form-border-focus-color;
	}

	&:active {
		background-color: $ui-hover-color;
		border-color: $form-border-color;
	}
}

.treeview {
	display: inline-block;
	width: 14px;
	height: 16px;
	min-height: auto;
	line-height: 16px;
	padding: 0;
	margin: 0 2px 0 0;
	cursor: auto;
	text-align: center;
	border: 0;
	background-color: $transparent;

	.arrow-right {
		border-left-color: $font-alt-color;
	}

	.arrow-down {
		margin: 0 0 2px;
		border-top-color: $font-alt-color;
	}

	&:hover,
	&:focus {
		background-color: $transparent;

		.arrow-right {
			border-left-color: $link-color;
		}

		.arrow-down {
			border-top-color: $link-color;
		}
	}
}

.table {
	display: table;
}

.row {
	display: table-row;
}

.cell {
	display: table-cell;
	vertical-align: top;

	&:last-child {
		.dashbrd-widget {
			margin: 0 0 10px;
		}
	}
}

.adm-img {
	width: 75%;
	text-align: center;
	margin: 0 auto;
	table-layout: fixed;

	.cell {
		vertical-align: bottom;
		padding: 20px 10px;
		width: 20%;
		text-align: center;

		img {
			max-width: 100%;
		}
	}
}

.cell-width {
	width: 8px;
}

.nowrap {
	white-space: nowrap;
}

.wordwrap {
	word-break: break-all;
}

.overflow-table {
	overflow-x: auto;
	position: relative;
	@extend %webkit-hor-scrollbar;
}

// Timeline in table view.
.timeline-date {
	text-align: right;
	white-space: nowrap;
	border-bottom-color: $transparent !important;
}

.timeline-axis {
	@extend %timeline-td;
	padding: 6px .04em !important;
	border-right: 2px solid lighten(desaturate($btn-bg-color, 27%), 44%);

	&::before {
		content: '';
		position: absolute;
		bottom: -1px;
		right: -2px;
		height: 100%;
		width: 2px;
		background-color: lighten(desaturate($btn-bg-color, 27%), 44%);
	}
}

.timeline-dot {
	&::after {
		@extend %timeline-dot;
		background-color: $btn-bg-color;
		border: 2px solid $ui-bg-color;
		border-radius: 100%;
		top: 11px;
	}
}

.timeline-dot-big {
	&::after {
		@extend %timeline-dot;
		background-color: $ui-bg-color;
		border: 2px solid $btn-bg-color;
		border-radius: 100%;
		top: 10px;
	}
}

.timeline-td {
	@extend %timeline-td;
	padding: 6px .25em !important;
}

.timeline-th {
	padding: 6px .25em !important;
}

%timeline-dot {
	content: '';
	position: absolute;
	z-index: 1;
	display: block;
	width: 4px;
	height: 4px;
	right: -5px;
	border-radius: 100%;
}

%timeline-td {
	position: relative;
	border-bottom-color: $ui-bg-color !important;
}

// Filters.
.filter-btn-container {
	position: relative;
	text-align: right;
}

.filter-container {
	background-color: $ui-bg-color;
	border: 1px solid $ui-border-color;
	margin: 0 0 10px;
	padding: 10px 0;
	position: relative;

	.table {
		border-bottom: 1px solid $table-border-color;
	}

	.filter-forms {
		padding: 0 10px;

		.btn-grey {
			vertical-align: baseline;
		}
	}

	.list-table {
		margin-bottom: -10px;
		border: 0;

		thead {
			th {
				color: initial;
				padding: 8px 5px 5px;
				border-bottom-width: 1px;
			}
		}
	}
}

.subfilter,
.subfilter-enabled {
	display: inline-block;
	height: 18px;
	position: relative;
}

.subfilter {
	margin-right: 10px;
}

.subfilter-enabled {
	background-color: $ui-bg-selected-color;
	border-radius: 2px;
	color: $font-selected-color;
	padding: 0 4px;

	.link-action {
		color: $font-selected-color;
		text-decoration: none;

		&:focus {
			color: $font-selected-color;
			border-bottom: 2px solid rgba($font-selected-color, .7);
		}

		&:hover {
			color: $font-selected-color;
			border-bottom: 1px solid rgba($font-selected-color, .7);
		}
	}

	sup {
		color: lighten($ui-bg-selected-color, 25%);
	}
}

.filter-forms {
	margin: 0 auto;
	text-align: center;
	white-space: nowrap;
	background-color: $ui-bg-color;

	.cell {
		text-align: left;
		padding: 0 20px 5px;

		&:first-child {
			padding-left: 0;
		}

		&:last-child {
			padding-right: 0;
			border-right: 0;
		}

		button {
			margin: 0;
		}
	}

	button {
		margin: 10px 5px 0;
	}

	select {
		vertical-align: top;
	}

	.table-forms .table-forms-td-right {
		td {
			padding: 0 5px 5px 0;
			vertical-align: middle;
		}
	}
}

.multiselect-control {
	display: flex;
	position: relative;
	vertical-align: top;
	white-space: nowrap;
}

.multiselect {
	@extend %form-input-style;
	display: flex;
	flex-direction: column;
	position: relative;
	margin-right: 3px;
	min-height: 24px;
	white-space: normal;

	&.active {
		border-color: $form-border-focus-color;
	}

	&[aria-disabled] {
		@extend %form-disabled;
	}

	input[type="text"] {
		border: 0;
		background: none;
		box-sizing: border-box;
		width: 100%;
		padding-bottom: 2px;
		min-height: 20px;
	}

	&.search-disabled {
		input[type="text"] {
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			padding: 0;
			margin: 0;
		}
	}

	.multiselect-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding-left: 2px;
		padding-bottom: 2px;

		li {
			display: block; // Override ".table-forms li".
			padding-left: 0 !important;
			margin: 2px 2px 0 0;
			overflow: hidden;
			white-space: nowrap;
			cursor: default;

			.subfilter-enabled {
				display: flex;
				flex-direction: row;
				padding: 0 3px 0 4px;
				line-height: 18px;

				> span:first-child {
					overflow: hidden;
					text-overflow: ellipsis;
				}

				> .subfilter-disable-btn {
					position: relative;
					left: 3px;
					flex-shrink: 0;
				}
			}

			&.selected {
				.subfilter-enabled,
				.subfilter-disable-btn,
				.subfilter-disable-btn:active {
					background-color: $multiselect-selected-bg-color;
				}
			}
		}
	}

	.disabled {
		background-color: $multiselect-disabled-bg-color;
		opacity: 1;

		.subfilter-enabled,
		.subfilter-disable-btn {
			background-color: $multiselect-item-disabled-bg-color;
			color: $multiselect-item-disabled-color;
		}
	}

	div[aria-live] {
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: -1;
	}
}

.multiselect-button {
	vertical-align: top;
}

.multiselect-suggest {
	padding: 0 5px;
	white-space: normal;
	color: $font-alt-color;
	background-color: $form-bg-color;

	li {
		display: block;
		height: inherit;
		line-height: normal;
		color: $font-color;
		padding: .4em 5px;
		margin: 0 -5px;
		cursor: pointer;
		overflow: hidden;
		text-overflow: ellipsis;
		transition: background-color .2s ease-out;

		&.suggest-hover {
			background-color: $action-hover-color;
		}
	}
}

.multiselect-matches {
	padding: .4em 5px;
	color: $font-color;
	font-weight: bold;
	@extend .multiselect-suggest;
}

.multiselect-available {
	position: absolute;
	z-index: 20000;
	border: 1px solid $action-border-color;
	overflow-y: auto;
	@extend %webkit-scrollbar;
	box-shadow: 0 6px 10px 0 $action-shadow-color;
}

.suggest-found {
	font-weight: bold;
	color: $dark-yellow;
}

.suggest-new {
	border-top: 1px solid $form-border-color;

	span:first-child {
		font-weight: bold;
	}
}

// Forms.
.table-forms-container {
	margin: 0 0 10px;
	background-color: $ui-bg-color;
	border: 1px solid $ui-border-color;
	padding: 10px;
	text-align: left;

	> .ui-tabs-nav {
		margin: -10px -10px 10px;
	}
}

.form-btns {
	button {
		margin: 10px 6px 5px;
	}
}

.table-forms {
	display: table;
	width: 100%;
	color: $font-color;

	li {
		display: table-row;

		&.display-none {
			@extend .display-none
		}
	}

	.multiselect-suggest {
		li {
			display: block;
		}
	}

	th {
		color: $font-alt-color;
		padding: 0 5px 0 0;
		text-align: left;

		&:last-child {
			padding: 0;
		}
	}

	tfoot {
		.table-forms-td-right {
			padding-top: 5px;
		}

		button {
			margin: 0 10px 0 0;
		}
	}

	.tfoot-buttons {
		@extend tfoot;
	}

	.table-forms-td-left {
		display: table-cell;
		padding: 5px 0;
		text-align: right;
		vertical-align: top;
		width: 15%;
		white-space: nowrap;

		label {
			display: block;
			height: 24px;
			line-height: 24px;
		}
	}

	.table-forms-td-right {
		display: table-cell;
		padding: 5px 0 5px 10px;
		vertical-align: middle;
		width: 85%;
		position: relative;

		&.has-before {
			padding-top: 0;
		}

		td {
			padding: 5px 5px 5px 0;
			position: relative;

			&.td-drag-icon {
				padding: 0 11px 0 0;
				vertical-align: middle;
			}

			.drag-icon {
				position: absolute;
				top: 5px;
				margin-right: 5px;
			}

			&.center {
				text-align: center;
				vertical-align: middle;

				.btn-grey {
					margin: 3px 0;
				}
			}

			&.overflow-break {
				max-width: 150px;
				overflow-wrap: break-word;
				white-space: initial;
				word-wrap: break-word;
			}

			&:last-child {
				padding-right: 0;
			}
		}

		.wrap-multiple-controls {
			display: flex;
		}

		.table-forms-separator {
			.radio-segmented + .multiselect-wrapper {
				margin-top: 5px;
			}
		}
	}

	.form-fields-inline {
		label {
			margin: 0 8px 0 3px;
		}
	}

	h4 {
		margin-bottom: -5px;
	}

	.hor-list {
		li {
			display: inline-block;
		}
	}

	.dynamic-row > td {
		padding-top: 0;
	}

	.dynamic-row-control > td {
		padding-top: 0;
		padding-bottom: 0;
	}
}

.table-forms-separator {
	border: 1px solid $table-border-color;
	box-sizing: border-box;
	display: inline-block;
	padding: 5px;
	position: relative;
}

.drag-drop-area {
	@extend %found-bg;
}

.margin-top {
	display: block;
	margin: 4px 0 0;
}

.form-new-group {
	border: 5px solid $lighter-green;
	border-radius: 2px;
	margin-left: -5px;
	padding: 4px 0;
}

.list-check-radio {
	li {
		display: block;
		padding: .3em 0;
	}

	&.hor-list li {
		margin-right: 15px;
		padding: .3em 0 0;

		&:last-child {
			margin-right: 0;
		}
	}

	label {
		padding: 0 0 0 18px;
		display: inline-block;
		text-indent: -18px;
		max-width: 600px;

		input[type="checkbox"] {
			left: -3px;
			margin: 0;
		}

		input[type="radio"] {
			left: -3px;
			margin: 0;
		}
	}
}

.list-numbered {
	counter-reset: line;

	.list-numbered-item {
		&::before {
			content: counter(line);
			counter-increment: line;
			user-select: none;
			text-align: right;
		}
	}
}

.radio-list-control {
	white-space: nowrap;

	li {
		position: relative;
		display: inline-block;
		margin: 0 -1px 0 0;

		&:first-child {
			border-radius: 3px 0 0 3px;

			label {
				border-radius: 2px 0 0 2px;
			}
		}

		&:last-child {
			border-radius: 0 3px 3px 0;

			label {
				border-radius: 0 2px 2px 0;
			}
		}

		&:only-child {
			border-radius: 3px;

			label {
				border-radius: 2px;
			}
		}
	}

	label {
		display: inline-block;
		border: 1px solid $form-border-color;
		line-height: 1.2em;
		padding: 4px 11px;
		transition: background-color .2s ease-out;
	}

	input[type="radio"] {
		position: absolute !important;
		top: auto !important;
		width: 1px !important;
		height: 1px !important;
		opacity: 0;

		+ label {
			color: $font-color;
			border-color: $form-border-color;
			background-color: $form-bg-color;

			&:hover {
				background-color: $btn-form-hover-color;
			}

			&:active {
				border-color: $form-border-color;
				background-color: $btn-form-hover-color;
			}
		}

		&:focus + label {
			border-color: $form-border-focus-color;
			background-color: $btn-form-hover-color;
			position: relative;
			z-index: 2;
		}

		&:checked + label {
			color: $white;
			border-color: $ui-bg-selected-color;
			background-color: $ui-bg-selected-color;
			position: relative;
			z-index: 1;
		}

		&:checked:focus + label {
			box-shadow: 0 0 0 2px rgba($blue, .35);
			position: relative;
			z-index: 2;
		}

		&:checked[disabled] + label {
			background-color: lighten($ui-bg-selected-color, 33%) !important;
			transition: none;
		}

		&[disabled] + label {
			transition: none;
			@extend %form-disabled;
		}
	}
}

label {
	&.form-label-asterisk {
		&::before {
			color: $form-label-asterisk-color;
			display: inline-block;
			content: '*';
			margin-right: .3em;
		}
	}

	input[type="checkbox"] {
		margin-right: 3px;
	}

	input[type="radio"] {
		margin-right: 3px;
	}
}

input {
	font: {
		family: $font-stack;
		size: $font-form-size;
	}

	&[type="text"] {
		@extend %form-input-height-padding;
		@extend %form-input-style;
	}

	&[type="password"] {
		@extend %form-input-height-padding;
		@extend %form-input-style;
	}

	&[type="search"] {
		@extend %form-input-height-padding;
		@extend %form-input-style;
	}

	&[type="number"] {
		@extend %form-input-height-padding;
		@extend %form-input-style;
	}

	&[type="email"] {
		@extend %form-input-height-padding;
		@extend %form-input-style;
	}

	&[type="time"] {
		@extend %form-input-height-padding;
		@extend %form-input-style;
	}

	&[type="file"] {
		padding: 1px;
		@extend %form-input-style;
	}

	&[type="checkbox"] {
		@extend %form-check-radio-style;
	}

	&[type="radio"] {
		@extend %form-check-radio-style;
	}

	&[disabled] {
		@extend %form-disabled;
	}

	&[readonly] {
		color: $font-color !important;
		@extend %form-disabled;
	}
}

textarea {
	font: {
		family: $font-stack;
		size: $font-form-size;
	}
	padding: 4px 5px;
	margin: 0;
	overflow: auto;
	@extend %form-input-style;
	@extend %webkit-scrollbar;

	&[disabled] {
		@extend %form-disabled;
	}

	&[readonly] {
		color: $font-color !important;
		@extend %form-disabled;

		&:focus {
			border-color: $form-border-focus-color;
		}
	}
}

select {
	font: {
		family: $font-stack;
		size: $font-form-size;
	}

	height: 24px;
	padding: 3px 3px 3px 0;
	background-color: $form-bg-color;
	@extend %form-input-style;
	@extend %webkit-scrollbar;

	option {
		color: $font-color;

		&[disabled] {
			@extend %form-disabled;
		}
	}

	&[multiple] {
		padding: 4px 5px;
		width: 300px;
		height: 150px;

		option {
			padding: 0;
		}
	}

	&[disabled] {
		@extend %form-disabled;
	}

	&[readonly] {
		color: $font-color !important;
		pointer-events: none;
		@extend %form-disabled;
	}
}

.form-input-margin {
	display: inline-block;
	margin: 0 3px 0 0;
}

.checkbox-radio {
	&:checked[readonly] + label span {
		transition: none;

		&::after {
			border-color: $form-border-color !important;
		}
	}

	&[readonly] {
		&,
		+ label {
			pointer-events: none;

			span {
				transition: none;
				@extend %form-disabled;
			}
		}
	}

	&[type="checkbox"] {
		+ label span {
			border-radius: 2px;
		}

		&:checked + label span {
			&::after {
				content: '';
				position: absolute;
				display: block;
				width: 7px;
				height: 4px;
				top: 6px;
				left: 7px;
				border-left: 2px solid $btn-bg-color;
				border-bottom: 2px solid $btn-bg-color;
				transform: translate(-50%, -50%) rotate(-45deg);
			}
		}

		&:checked[disabled] + label span {
			&::after {
				border-color: $form-border-color !important;
			}
		}
	}

	&[type="radio"] {
		+ label span {
			border-radius: 50%;
		}

		&:checked + label span {
			&::after {
				content: '';
				position: absolute;
				display: block;
				width: 8px;
				height: 8px;
				top: 3px;
				left: 3px;
				background-color: $btn-bg-color;
				border-radius: 50%;
			}
		}

		&:checked[disabled] + label span {
			&::after {
				background-color: $form-border-color !important;
			}
		}
	}

	position: absolute !important;
	top: auto !important;
	width: 16px !important;
	height: 16px !important;
	opacity: 0;
	z-index: 1;

	+ label span {
		position: relative;
		display: inline-block;
		width: 14px;
		height: 14px;
		margin: -4px 4px 0 0;
		bottom: -3px;
		border: 1px solid $form-border-color;
		background-color: $form-bg-color;

		&:active {
			border-color: $form-border-color;
		}
	}

	+ label.label-pos-left span {
		margin-left: 6px;
		margin-right: 1px;
	}

	&:focus + label span {
		border-color: $form-border-focus-color;
	}

	&:checked:focus + label span {
		border-color: $form-border-focus-color;
	}

	&:checked[disabled] + label span {
		transition: none;

		&::after {
			border-color: $form-border-color !important;
		}
	}

	&[disabled] + label span {
		transition: none;
		@extend %form-disabled;
	}
}

%form-check-radio-style {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: middle;
	position: relative;
	top: -1px;
	overflow: hidden;
	width: 13px;
	height: 13px;
	background: none;
}

%form-input-height-padding {
	margin: 0;
	padding: 0 5px;
	min-height: 24px;
}

%form-input-style {
	background-color: $form-bg-color;
	border: 1px solid $form-border-color;
	box-sizing: border-box;
	color: $font-color;
	outline: 0;
	transition: border-color .2s ease-out, box-shadow .2s ease-out;

	&:focus {
		border-color: $form-border-focus-color;
	}
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
	vertical-align: middle;
}

button {
	font: {
		family: $font-stack;
		size: $font-form-size;
	}
	background-color: $btn-bg-color;
	border: 1px solid $btn-bg-color;
	border-radius: 2px;
	color: $btn-font-color;
	margin: 0;
	padding: 0 11px;
	min-height: 24px;
	cursor: pointer;
	outline: 0;
	transition: border-color .2s ease-out, background-color .2s ease-out;

	&:hover {
		@include btn-hover-active($btn-font-color, $btn-bg-color);
	}

	&:focus {
		box-shadow: 0 0 0 2px rgba($blue, .35);
		@include btn-hover-active($btn-font-color, $btn-bg-color);
	}

	&:active {
		@include btn-hover-active($btn-font-color, $btn-bg-color);
	}
}

.btn-alt {
	color: $btn-alt-font-color;
	background-color: $btn-alt-bg-color;

	.plus-icon {
		background-color: $btn-alt-font-color;
		margin-right: 8px;

		&::after {
			background-color: $btn-alt-font-color;
		}
	}

	&:hover {
		@include btn-hover-active($btn-font-color, $btn-bg-color);

		.plus-icon {
			background-color: $btn-font-color;

			&::after {
				background-color: $btn-font-color;
			}
		}
	}

	&:focus {
		@include btn-hover-active($btn-font-color, $btn-bg-color);

		.plus-icon {
			background-color: $btn-font-color;

			&::after {
				background-color: $btn-font-color;
			}
		}
	}

	&:active {
		@include btn-hover-active($btn-font-color, $btn-bg-color);

		.plus-icon {
			background-color: $btn-font-color;

			&::after {
				background-color: $btn-font-color;
			}
		}
	}
}

.btn-grey {
	color: $btn-form-font-color;
	background-color: $btn-form-bg-color;
	border-color: $btn-form-border-color;
	vertical-align: top;

	&:hover {
		color: $btn-form-font-color;
		background-color: $btn-form-hover-color;
		border-color: $btn-form-border-color;
	}

	&:focus {
		color: $btn-form-font-color;
		background-color: $btn-form-hover-color;
		border-color: $form-border-focus-color;
	}

	&:active {
		color: $btn-form-font-color;
		background-color: $btn-form-hover-color;
		border-color: $form-border-focus-color;
	}
}

.btn-link {
	position: relative;
	background-color: $transparent;
	border: 0;
	border-bottom: 1px dotted $link-color;
	border-radius: 0;
	color: $link-color;
	font-size: inherit;
	padding: 0;
	min-height: inherit;

	&:hover {
		@extend .btn-link;
	}

	&:focus {
		@extend .btn-link;
		outline: none;
		margin-bottom: -2px !important;
		border-bottom: 2px solid rgba($link-hover-color, .5);
		box-shadow: 0 0 0 0 !important;
	}

	&:active {
		@extend .btn-link;
	}

	&[disabled] {
		background-color: $transparent;

		&:hover {
			background-color: $transparent;
		}
	}
}

$icon-btn: (
	conf: $btn-bg-color url($sprite-path) no-repeat -7px -187px,
	kiosk: $btn-bg-color url($sprite-path) no-repeat -79px -259px,
	min: $btn-bg-color url($sprite-path) no-repeat -7px -259px,
	add-fav: $btn-bg-color url($sprite-path) no-repeat -7px -295px,
	remove-fav: $btn-bg-color url($sprite-path) no-repeat -7px -329px,
	action: $btn-bg-color url($sprite-path) no-repeat -7px -367px,
	info: $btn-bg-color url($sprite-path) no-repeat -7px -403px
);

// Dynamically generated classes:
//  .btn-conf
//  .btn-kiosk
//  .btn-min
//  .btn-add-fav
//  .btn-remove-fav
//  .btn-action
//  .btn-info
@each $icon-btn, $bgimage in $icon-btn {
	.btn-#{$icon-btn} {
		background: $bgimage;
		@extend %button-icon-size;
	}
}

$icon-widget-btn: (
	iterator-page-previous: url($sprite-path) no-repeat -85px -657px,
	iterator-page-next: url($sprite-path) no-repeat -83px -623px,
	widget-action: url($sprite-path) no-repeat -6px -618px,
	widget-collapse: url($sprite-path) no-repeat -6px -654px,
	widget-expand: url($sprite-path) no-repeat -6px -689px,
	widget-edit: url($sprite-path) no-repeat -42px -619px,
	alarm-on: url($sprite-path) no-repeat -6px -546px,
	alarm-off: url($sprite-path) no-repeat -6px -582px,
	sound-on: url($sprite-path) no-repeat -6px -474px,
	sound-off: url($sprite-path) no-repeat -6px -510px,
	info-clock: url($sprite-path) no-repeat -87px -762px
);

// Dynamically generated classes:
//  .btn-iterator-page-previous
//  .btn-iterator-page-next
//  .btn-widget-action
//  .btn-widget-collapse
//  .btn-widget-expand
//  .btn-widget-edit
//  .btn-alarm-on
//  .btn-alarm-off
//  .btn-sound-on
//  .btn-sound-off
//  .btn-info-clock
@each $icon-widget-btn, $bgimage in $icon-widget-btn {
	.btn-#{$icon-widget-btn} {
		background: $bgimage;
		@extend %btn-widget;
	}
}

// Time selection.
.ui-tabs-nav {
	height: 30px;
	line-height: 30px;
	border-bottom: 1px solid $table-border-color;

	li {
		display: inline-block;

		a {
			border: 0;
			padding: 8px 10px;
			transition: background-color .2s ease-out;

			&:hover,
			&:focus,
			&:active {
				background-color: $ui-hover-color;
			}
		}

		&.ui-tabs-active:first-child {
			border-left: 0;
		}

		&.ui-tabs-active {
			a {
				padding: 8px 10px 6px;
				background-color: $transparent;
				color: $font-color;
				text-decoration: none;
				cursor: default;
				border-bottom: 3px solid $ui-tab-bg-selected-color;
			}
		}

		&.ui-state-disabled {
			a {
				cursor: default;
				color: $btn-disabled-font-color;
				background-color: $transparent;
				border: 0;
			}
		}
	}

	.btn-time,
	.filter-trigger {
		border-radius: 2px;
		color: $btn-font-color;
		background-color: $btn-bg-color;
		border: 1px solid $btn-bg-color;
		position: relative;
		margin: 0 0 0 6px;
		min-height: 24px;
		vertical-align: bottom;

		&::after {
			content: '';
			position: absolute;
		}

		&:focus,
		&:hover {
			@include btn-hover-active($btn-font-color, $btn-bg-color);
			cursor: pointer;
		}
	}

	.btn-time {
		padding: 0 34px 0 10px;

		&::after {
			margin: 0 5px;
			right: 0;
			top: 0;
			height: 24px;
			width: 24px;
			background: url($sprite-path) no-repeat -87px -583px;
		}
	}

	.filter-trigger {
		padding: 0 34px 0 10px;

		&::after {
			margin: 0 5px;
			right: 0;
			top: 0;
			height: 24px;
			width: 24px;
			background: url($sprite-path) no-repeat -87px -547px;
		}
	}

	.ui-state-focus {
		.btn-time,
		.filter-trigger {
			box-shadow: 0 0 0 2px rgba($blue, .35);
			@include btn-hover-active($btn-font-color, $btn-bg-color);
		}

		&.ui-tabs-active {
			.btn-time,
			.filter-trigger {
				box-shadow: 0 0 0 2px rgba($blue, .35);
			}
		}
	}

	.ui-tabs-active {
		.btn-time,
		.filter-trigger {
			color: $font-color;
			background-color: $ui-bg-color;
			border: 1px solid $ui-border-color;
			border-bottom: 0;
			border-radius: 2px 2px 0 0;
			margin: -1px 0 0 6px;
			padding: 1px 34px 7px 10px;
		}

		.btn-time {
			&::after {
				background-position: -246px -583px;
				top: 1px;
			}
		}

		.filter-trigger {
			&::after {
				background-position: -246px -547px;
			}
		}
	}

	.ui-state-hover {
		&.ui-tabs-active {
			.btn-time,
			.filter-trigger {
				background-color: $action-hover-color;
			}
		}
	}
}

.filter-space {
	box-sizing: border-box;

	li a.ui-tabs-anchor {
		vertical-align: top;
	}

	ul.ui-tabs-nav li:focus {
		outline: none;
	}

	.filter-btn-container {
		height: 29px;
		z-index: 2;
	}

	.ui-tabs-nav {
		height: 29px;
		border-bottom: 0;

		a {
			display: inline-block;
			box-sizing: border-box;
			line-height: 22px;
			margin-bottom: 5px;
			text-align: center;
		}
	}
}

.btn-time-left,
.btn-time-right {
	background: url($sprite-path) no-repeat;
	content: '';
	border: 0;
	height: 24px;
	width: 24px;
	vertical-align: top;

	&:focus,
	&:hover {
		border: 1px solid $ui-border-color;
		@include btn-hover-active($btn-font-color, $btn-bg-color);
	}

	&:disabled {
		border: 0;
		opacity: .4;
	}
}

.btn-time-right {
	background-position: -83px -623px;

	&:focus,
	&:hover {
		background-position: -396px -624px;
	}

	&:disabled {
		background-position: -83px -623px;
	}
}

.btn-time-left {
	background-position: -85px -657px;

	&:focus,
	&:hover {
		background-position: -398px -658px;
	}

	&:disabled {
		background-position: -85px -657px;
	}
}

.btn-time-out {
	background: none;
	border: 1px solid transparent;
	color: $font-color;
	height: 24px;
	line-height: 22px;
	margin: 0 5px;
	vertical-align: top;

	&:disabled {
		background: transparent !important;
		border-color: transparent !important;
		opacity: .8;
	}
}


.time-quick {
	font-size: 12px;
	line-height: 20px;

	li {
		&:last-of-type {
			a {
				margin-bottom: 0;
			}
		}

		a {
			display: inline-block;
			padding: 2px 10px;
			margin-bottom: 2px;
			margin-left: -10px;
			border-bottom: 0;

			&:hover,
			&:focus,
			&.selected {
				border-radius: 2px;
				border-bottom: 0;
			}

			&:hover {
				background: $action-hover-color;
				transition: background-color .2s ease-out;
			}

			&:focus {
				box-shadow: 0 0 0 2px rgba($blue, .35);
			}

			&.selected {
				background: $ui-bg-selected-color;
				color: $white;
				transition: background-color .2s ease-out;
			}
		}
	}
}

.time-selection-container {
	display: flex;
	justify-content: flex-end;

	.time-input {
		border-right: 1px solid $ui-border-color;
		padding: 0 30px 0 10px;
		text-align: right;
		white-space: nowrap;

		.time-input-error {
			margin: -8px 29px 0 0;
		}

		ul {
			padding: 0 0 10px;
		}

		li {
			display: inline-block;
			vertical-align: baseline;
			padding: 0 0 0 10px;

			.icon-cal {
				position: relative;
				vertical-align: middle;
				margin-left: 2px;
			}
		}
	}

	.time-quick-range {
		text-align: right;
		white-space: nowrap;
		margin: 0 0 0 20px;

		.cell {
			display: inline-flex;
			vertical-align: top;
			text-align: left;
			margin: 0 10px;
		}

		.time-quick-selected {
			display: inline-block;
			padding: 2px 10px;
			margin-left: -10px;
			color: $font-selected-color;
			background-color: $ui-bg-selected-color;
			border-bottom: 0;
		}
	}
}

.btn-dashbrd-conf {
	background: url($sprite-path) no-repeat -42px -619px;
	@extend %btn-dashbrd;
}

.btn-dashbrd-normal {
	box-shadow: 1px 1px 2px $action-shadow-color;
	position: fixed;
	right: 45px;
	top: 5px;
	opacity: 1;
	z-index: 1010;
	transition: opacity 1s ease-out;

	&.hidden {
		opacity: 0;
	}
}

%btn-widget {
	width: 24px;
	height: 24px;
	margin: 2px 2px 0 0;
	@extend %btn-widget-defaults;
}

%btn-dashbrd {
	width: 24px;
	height: 24px;
	@extend %btn-widget-defaults;
}

%btn-widget-defaults {
	border: 0;
	min-height: 0;
	padding: 0;
	opacity: .5;
	transition: opacity .2s ease-out;

	&:hover {
		@extend %btn-widget-hover-active;
	}

	&:focus {
		@extend %btn-widget-hover-active;
	}

	&:active {
		@extend %btn-widget-hover-active;
	}
}

%button-icon-size {
	width: 24px;
	height: auto;
	padding: 0;
}

%btn-disabled {
	color: $btn-disabled-font-color !important;
	background-color: $btn-disabled-bg-color;
	border-color: $btn-disabled-border-color;
	cursor: default;

	&.icon-cal {
		opacity: .3;
		background-color: transparent;
	}
}

%form-disabled {
	color: $form-disabled-font-color;
	background-color: $form-disabled-bg-color !important;
	border-color: $form-disabled-border-color;
}

.inaccessible {
	.subfilter-enabled {
		color: darken($font-selected-color, 25%);
	}
}

%btn-widget-hover-active {
	background-color: $transparent;
	opacity: 1;
}

button[disabled] {
	@extend %btn-disabled;

	&:hover {
		@extend %btn-disabled;
	}

	&:active {
		@extend %btn-disabled;
	}
}

.action-buttons {
	margin: 10px 0 0;
	color: $font-alt-color;

	button {
		margin: 0 10px 10px 0;
	}
}

.selected-item-count {
	display: inline-block;
	margin: 0 14px 0 0;
}

$var-icons: (
	maint: url($sprite-path) no-repeat -46px -802px,
	depend-up: url($sprite-path) no-repeat -49px -729px,
	depend-down: url($sprite-path) no-repeat -49px -765px,
	ackn: url($sprite-path) no-repeat -45px -693px
);

// Dynamically generated classes:
//  .icon-maint
//  .icon-depend-up
//  .icon-depend-down
//  .icon-ackn
@each $var-icons, $bgimage in $var-icons {
	.icon-#{$var-icons} {
		margin: 0 18px 0 0;
		&::before {
			background: $bgimage;
			@extend %var-icons;
		}
	}
}

$trigger-expression-tree-icons: (
	top-bottom: url($sprite-path) no-repeat -84px -300px,
	top-bottom-right: url($sprite-path) no-repeat -84px -334px,
	top-right: url($sprite-path) no-repeat -84px -372px,
	empty: url($sprite-path) no-repeat -84px -350px
);

%trigger-expression-tree-icons-common {
	margin: 0 12px 0 0;

	&::before {
		background: url($sprite-path) no-repeat;
		display: inline-block;
		width: 12px;
		height: 12px;
		position: absolute;
		content: '';
	}
}

// Dynamically generated classes:
//  .icon-tree-top-bottom
//  .icon-tree-top-bottom-right
//  .icon-tree-top-right
//  .icon-tree-empty
@each $class, $bg-position in $trigger-expression-tree-icons {
	.icon-tree-#{$class} {
		@extend %trigger-expression-tree-icons-common;

		&::before {
			background-position: $bg-position;
		}
	}
}

$form-icon-btn: (
	cal: url($sprite-path) no-repeat -42px -834px,
	wzrd-action: url($sprite-path) no-repeat -6px -617px
);

// Dynamically generated classes:
//  .icon-cal
//  .icon-wzrd-action
@each $form-icon-btn, $bgimage in $form-icon-btn {
	.icon-#{$form-icon-btn} {
		background: $transparent $bgimage;
		@extend %form-icon-btn;

		@if $form-icon-btn == 'wzrd-action' {
			margin-top: -16px;
		}
	}
}

%form-icon-btn {
	border: 0;
	cursor: pointer;
	position: absolute;
	@extend %button-icon-size;
	opacity: .75;
	transition: opacity .2s ease-out;

	&:hover,
	&:focus,
	&:active {
		opacity: 1;
		background-color: $transparent;
	}
}

%var-icons {
	display: inline-block;
	width: 18px;
	height: 18px;
	position: absolute;
	content: '';
}

.drag-icon {
	margin-left: -9px;
	height: 24px;
	background: url($sprite-path) no-repeat -6px -762px;
	@extend %button-icon-size;
}

.drag-icon,
.ui-draggable .dashbrd-widget-head,
.dashbrd-grid-widget.ui-draggable .dashbrd-grid-widget-head,
.dashbrd-grid-iterator.ui-draggable .dashbrd-grid-iterator-head {
	@extend %cursor-drag;
}

.ui-draggable-dragging {
	.drag-icon,
	.dashbrd-widget-head,
	.dashbrd-grid-widget-head,
	.dashbrd-grid-iterator-head {
		@extend %cursor-dragging;
	}
}

.icon-info {
	position: relative;
	width: 8px;
	height: 11px;
	cursor: pointer;
	margin: -12px 0 -4px;

	&::before {
		content: '';
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 14px;
		height: 14px;
		background: url($sprite-path) no-repeat -47px -659px;
	}
}

// Installation.
.setup-container {
	background-color: $ui-bg-color;
	width: 766px;
	height: 420px;
	margin: 0 auto;
	margin-top: 5%;
	padding: 42px;
	vertical-align: top;
	position: relative;
	border: 1px solid $ui-border-color;

	h1 {
		border: 0;
		margin: 3px 0 11px;
		padding: 0;
	}

	.setup-logo {
		display: flex;
		margin-bottom: 40px;
		justify-content: flex-start;
	}
}

.setup-left {
	float: left;
	width: 200px;
	padding-right: 10px;

	ul {
		margin: -4px 0 0 -42px;

		li {
			padding: 4px 0 4px 42px;

			&.setup-left-current {
				border-left: 3px solid $ui-tab-bg-selected-color;
				color: $font-alt-color;
				padding-left: 39px;
			}
		}
	}
}

.setup-right {
	width: auto;
	margin-left: 200px;
}

.setup-right-body {
	padding-right: 5px;
	max-height: 345px;
	overflow-y: auto;

	.list-table {
		border: 0;
	}

	.table-forms-td-left {
		text-align: left;
		width: auto;
	}

	.table-forms-td-right {
		width: 100%;
	}

	h1 {
		margin: 25% 0 .4em;
	}

	@extend %webkit-scrollbar;
}

.setup-title {
	color: $font-alt-color;
	height: 345px;
	display: table-cell;
	vertical-align: middle;
	font-size: $font-setup-title;
	line-height: $setup-title-line-height;

	span {
		display: block;
		font-size: $font-setup-sup-title;
	}
}

.setup-footer {
	position: absolute;
	bottom: 32px;
	width: 766px;
	text-align: right;

	div {
		float: right;
	}

	button {
		margin: 0 0 0 10px;

		&.float-left {
			margin: 0;
			float: left;
		}
	}
}

.signin-container {
	background-color: $ui-bg-color;
	width: 280px;
	margin: 0 auto;
	margin-top: 5%;
	padding: 42px 42px 39px;
	border: 1px solid $ui-border-color;

	h1 {
		border: 0;
		margin: 0 0 17px;
		padding: 0;
	}

	ul li {
		padding: 16px 0 0;
		font-size: $font-top-nav-size;

		&.sign-in-txt {
			text-align: center;
		}
	}

	label {
		display: inline-block;
		margin: 0 0 2px;
	}

	input {
		&[type="text"] {
			@extend %signin-input;
		}

		&[type="password"] {
			@extend %signin-input;
		}
	}

	button {
		font-size: $font-form-size;
		margin: 7px 0;
		min-height: 35px;
		line-height: 35px;
		width: 100%;
	}
}

.signin-logo {
	display: flex;
	margin-bottom: 21px;
	justify-content: center;
}

.signin-links {
	width: 100%;
	text-align: center;
	color: $font-alt-color;
	margin: 11px 0 0;
}

%signin-input {
	padding: 9px 5px;
	width: 100%;
}

// Dashboard, widgets and iterators.
// To maintain code clarity:
//   - Do not mix rules for dashboard view mode and dashboard edit mode.
//   - Do not mix rules for widgets and iterators.
.dashbrd-grid-container {
	position: relative;
	margin: -4px;

	// For widget sliding headers to appear over the breadcrumbs.
	z-index: 3;
}

.dashbrd-grid-new-widget-placeholder {
	box-sizing: border-box;
	display: flex;
	height: 200px;
	padding: .25rem;
	width: calc(100% / 6 - .65rem);
	z-index: 999;
	color: $font-alt-color;
	cursor: pointer;

	.dashbrd-grid-widget-new-box,
	.dashbrd-grid-widget-set-position,
	.dashbrd-grid-widget-set-size {
		background-color: rgba($ui-bg-color, .7);
		border: 1px dashed $form-border-color;
		box-shadow: 2px 2px 6px $action-shadow-color;
		flex: 1;
		position: relative;
		overflow: hidden;
	}

	.dashbrd-grid-widget-set-size {
		background: darken($body-bg-color, 6%);
		box-shadow: inset 2px 2px 6px $action-shadow-color;
	}

	.dashbrd-grid-new-widget-label {
		$icon-height: 28px;

		position: absolute;
		left: 0;
		top: calc(50% - #{$icon-height / 2});
		right: 0;
		bottom: 0;
		padding: ($icon-height + 10px) 5px 5px;
		text-align: center;

		&::before {
			background: url($sprite-path) no-repeat -157px -888px;
			content: ' ';
			height: $icon-height;
			width: 36px;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	&.disabled {
		opacity: 1;

		.dashbrd-grid-widget-new-box {
			background-color: rgba($ui-bg-color, .7);

			.dashbrd-grid-new-widget-label::before {
				background: url($sprite-path) no-repeat -122px -284px;
			}
		}
	}
}

.dashbrd-grid-widget-set-size {
	.dashbrd-grid-new-widget-label {
		&::before {
			background: url($sprite-path) no-repeat -345px -888px;
		}
	}
}

.dashbrd-grid-widget-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: .25rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.dashbrd-grid-widget-head {
	position: absolute;
	top: .25rem;
	left: .25rem;
	right: .25rem;
	height: 2rem;
	padding-left: 10px;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	overflow: hidden;
	align-items: flex-start;
	border: 1px solid $ui-border-color;
	border-bottom: 0;
	background-color: $ui-bg-color;

	/*
	 * For floating headers to appear over other widgets.
	 * Cannot rely on DOM order here, since widgets of iterators can be shuffled on refresh.
	 */
	z-index: 3;

	h4 {
		flex-grow: 1;
		margin-top: .5rem;
		color: widget-head-font-color($font-color);
		font-weight: bold;
		@extend %overflow-ellipsis;
	}

	ul {
		flex-shrink: 0;

		li {
			float: left;
			padding: 0;

			select {
				margin: 4px 0;
			}
		}
	}
}

.dashbrd-grid-widget-actions {
	opacity: 0;
	transition: opacity .2s ease-out;
}

.dashbrd-grid-widget-content {
	flex-grow: 1;
	margin-top: 2rem;
	box-sizing: border-box;
	height: calc(100% - 2rem);
	padding-bottom: 8px;
	overflow: auto;
	border: 1px solid $ui-border-color;
	background-color: $ui-bg-color;

	@extend %webkit-scrollbar;

	.list-table {
		border: 0;

		th {
			@extend %dashbrd-widget-td;
		}

		td {
			@extend %dashbrd-widget-td;
		}

		tbody tr {
			&:last-child th,
			&:last-child td {
				border-bottom: 1px solid $table-border-color;

				&.list-table-footer {
					border-bottom: 0;
				}
			}
		}
	}

	.debug-output {
		max-height: none;
		border-color: $table-border-color;
	}

	.msg-bad,
	.msg-good,
	.msg-warning {
		margin: 0 10px;
	}
}

.widget-placeholder {
	.dashbrd-grid-widget-container {
		.dashbrd-grid-widget-content {
			margin-top: 0;
			height: 100%;
		}
	}
}

.dashbrd-grid-widget-mask {
	position: absolute;
	top: .25rem;
	left: .25rem;
	right: .25rem;
	bottom: .25rem;
	display: none;
}

.dashbrd-grid-widget {
	position: absolute;

	&.dashbrd-grid-widget-hidden-header {
		.dashbrd-grid-widget-head {
			height: 0;
			transition: height .3s, margin-top .3s, box-shadow .3s;
		}

		.dashbrd-grid-widget-content {
			margin-top: 0;
			height: 100%;
			padding-top: 8px;
		}

		&.dashbrd-grid-widget-focus {
			.dashbrd-grid-widget-head {
				height: 2rem;
				margin-top: -2rem;
				box-shadow: 0 -6px 8px -2px rgba(128, 128, 128, .15);
			}
		}
	}

	&.dashbrd-grid-widget-focus {
		.dashbrd-grid-widget-actions {
			opacity: 1;
		}
	}

	&.ui-resizable-resizing.resizing-top {
		.dashbrd-grid-widget-container {
			top: auto;
			bottom: 0;
		}
	}

	&.ui-resizable-resizing.resizing-left {
		.dashbrd-grid-widget-container {
			left: auto;
			right: 0;
		}
	}
}

.dashbrd-grid-iterator-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.dashbrd-grid-iterator-head {
	position: absolute;
	top: .25rem;
	left: .25rem;
	right: .25rem;
	height: 0;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	overflow: hidden;
	padding-left: 10px;
	box-sizing: border-box;
	border: 1px solid $ui-border-color;
	border-bottom: 0;
	background-color: $ui-bg-color;
	opacity: 0;

	// Transition for opacity is set for best border disappearance on different themes.
	transition: margin-top .3s ease-out, height .3s ease-out, opacity .15s .15s ease-out, box-shadow .3s ease-out;

	// Not to loose hovered header while widget underneath is updating.
	z-index: 3;

	h4 {
		flex-grow: 1;
		margin-top: .5rem;
		color: widget-head-font-color($font-color);
		font-weight: bold;
		@extend %overflow-ellipsis;
	}

	ul {
		flex-shrink: 0;

		li {
			float: left;
			padding: 0;
		}
	}

	.dashbrd-grid-iterator-pager {
		margin: 0 10px;
		height: 2rem;
		display: none;
		flex-direction: row;
		flex-shrink: 0; // IE11 fix.
		align-items: center;

		.dashbrd-grid-iterator-pager-info {
			margin: 2px .5em 0;
			white-space: nowrap;
			color: widget-head-font-color($font-color);
		}
	}

	&.pager-visible .dashbrd-grid-iterator-pager {
		display: flex;
	}
}

.dashbrd-grid-iterator-content {
	// To catch vertical resize events correctly.
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	// To allow overflowing of the floating headers of child widgets.
	overflow: visible;

	transition: margin-top .3s ease-out;
}

.dashbrd-grid-iterator-placeholder {
	position: absolute;
	display: flex;

	> div {
		margin: .25rem;
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		border: 1px solid $ui-border-color;
		background-color: rgba($ui-bg-color, .3);
	}
}

.dashbrd-grid-iterator-too-small {
	position: absolute;
	top: .25rem;
	left: .25rem;
	right: .25rem;
	bottom: .25rem;
	overflow: hidden;
	display: none;
	align-items: center;
	justify-content: center;
	border: 1px solid $ui-border-color;
	background-color: $ui-bg-color;

	> div {
		padding: 0 10px;
		text-align: center;
		color: $font-alt-color;
	}
}

.dashbrd-grid-iterator-mask {
	position: absolute;
	top: .25rem;
	left: .25rem;
	right: .25rem;
	bottom: .25rem;
	display: none;
}

.dashbrd-grid-iterator {
	position: absolute;

	&.iterator-too-small {
		.dashbrd-grid-iterator-too-small {
			display: flex;
		}

		.dashbrd-grid-iterator-content {
			display: none;
		}
	}

	&.dashbrd-grid-iterator-focus {
		.dashbrd-grid-iterator-head {
			margin-top: -2rem;
			height: 2rem;
			box-shadow: 0 -6px 8px -2px rgba(128, 128, 128, .15);
			opacity: 1;

			// Not inheriting opacity transition here.
			transition: margin-top .3s ease-out, height .3s ease-out, box-shadow .3s ease-out;
		}

		&.dashbrd-grid-iterator-hidden-header.iterator-double-header {
			.dashbrd-grid-iterator-head {
				margin-top: -4rem;
				height: 4rem;
			}
		}
	}

	&.ui-resizable-resizing.resizing-top {
		.dashbrd-grid-iterator-container {
			top: auto;
			bottom: 0;
		}
	}

	&.ui-resizable-resizing.resizing-left {
		.dashbrd-grid-iterator-container {
			left: auto;
			right: 0;
		}
	}

	&.iterator-alt-content {
		.dashbrd-grid-iterator-content {
			position: absolute;
			top: .25rem;
			left: .25rem;
			right: .25rem;
			bottom: .25rem;
			border: 1px solid $ui-border-color;
			background-color: $ui-bg-color;

			> div {
				padding-top: 8px;

				.list-table {
					border: 0;

					th {
						@extend %dashbrd-widget-td;
					}

					td {
						@extend %dashbrd-widget-td;
					}

					tbody tr {
						&:last-child th,
						&:last-child td {
							border-bottom: 1px solid $table-border-color;

							&.list-table-footer {
								border-bottom: 0;
							}
						}
					}
				}

				.msg-good,
				.msg-bad {
					margin: 0 10px;
				}
			}
		}
	}
}

.dashbrd-grid-container.dashbrd-mode-edit {
	.dashbrd-grid-widget-actions {
		opacity: 1;
	}

	&.dashbrd-positioning {
		// No lazy transitions while dragging or resizing.

		.dashbrd-grid-widget {
			&.dashbrd-grid-widget-hidden-header {
				.dashbrd-grid-widget-head {
					transition: none;
				}
			}
		}

		.dashbrd-grid-iterator {
			&.dashbrd-grid-widget-hidden-header {
				.dashbrd-grid-widget-head {
					transition: none;
				}
			}
		}

		// No widget interactivity while dragging or resizing.

		.dashbrd-grid-widget-mask {
			display: block;
		}

		.dashbrd-grid-iterator-mask {
			display: block;
		}
	}

	.dashbrd-grid-widget {
		.ui-resizable-handle {
			visibility: hidden;
		}

		&.dashbrd-grid-widget-focus .ui-resizable-handle {
			visibility: visible;
		}

		&.ui-resizable-resizing {
			&.dashbrd-grid-widget-hidden-header {
				.dashbrd-grid-widget-head {
					margin-top: 0;
					height: 0;
					box-shadow: none;
				}
			}
		}

		&.ui-draggable-dragging {
			.ui-resizable-handle {
				visibility: hidden;
			}

			&.dashbrd-grid-widget-hidden-header {
				.dashbrd-grid-widget-head {
					margin-top: -2rem;
					height: 2rem;
					box-shadow: 0 -6px 8px -2px rgba(128, 128, 128, .15);
					opacity: .5;
				}
			}
		}

		&.ui-resizable-resizing,
		&.ui-draggable-dragging {
			z-index: 1000;

			&::before {
				content: '';
				display: block;
				position: absolute;
				top: .25rem;
				left: .25rem;
				right: .25rem;
				bottom: .25rem;
				background-color: rgba(darken($body-bg-color, 6%), .75);
				box-shadow: 0 4px 20px 2px rgba(0, 0, 0, .15);
			}

			.dashbrd-grid-widget-head {
				border-color: darken($ui-border-color, 6%);
			}

			.dashbrd-grid-widget-content {
				border-color: darken($ui-border-color, 6%);
			}
		}
	}

	.dashbrd-grid-iterator {
		.ui-resizable-handle {
			visibility: hidden;
		}

		&.dashbrd-grid-iterator-focus .ui-resizable-handle {
			visibility: visible;
		}

		&.ui-resizable-resizing {
			.dashbrd-grid-iterator-head {
				margin-top: 0;
				height: 0;
				box-shadow: none;
				opacity: 0;
			}
		}

		&.ui-draggable-dragging {
			.ui-resizable-handle {
				visibility: hidden;
			}

			.dashbrd-grid-iterator-head {
				margin-top: -2rem;
				height: 2rem;
				box-shadow: 0 -6px 8px -2px rgba(128, 128, 128, .15);
				opacity: .5;
			}

			&.dashbrd-grid-iterator-hidden-header.iterator-double-header {
				.dashbrd-grid-iterator-head {
					margin-top: -4rem;
					height: 4rem;
				}
			}
		}

		&.ui-resizable-resizing,
		&.ui-draggable-dragging {
			z-index: 1000;

			&::before {
				content: '';
				display: block;
				position: absolute;
				top: .25rem;
				left: .25rem;
				right: .25rem;
				bottom: .25rem;
				background-color: rgba(darken($body-bg-color, 6%), .75);
				box-shadow: 0 4px 20px 2px rgba(0, 0, 0, .15);
			}

			.dashbrd-grid-iterator-head {
				border-color: darken($ui-border-color, 6%);
			}

			.dashbrd-grid-iterator-content {
				.dashbrd-grid-widget {
					.dashbrd-grid-widget-head {
						border-color: darken($ui-border-color, 6%);
					}

					.dashbrd-grid-widget-content {
						border-color: darken($ui-border-color, 6%);
					}
				}

				.dashbrd-grid-iterator-placeholder > div {
					border-color: darken($ui-border-color, 6%);
				}
			}

			.dashbrd-grid-iterator-mask {
				border: 1px solid darken($ui-border-color, 8%);
				border-top: 0;
			}
		}
	}

	.dashbrd-grid-widget-placeholder {
		position: absolute;
		z-index: 999;

		> div {
			position: absolute;
			top: .25rem;
			left: .25rem;
			right: .25rem;
			bottom: .25rem;
			background-color: darken($body-bg-color, 6%) !important;
		}
	}
}

@keyframes zoom-in-out {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

.new-widget {
	animation: zoom-in-out .2s linear;
}

.ui-resize-dot {
	@extend %ui-resize-dot;
}

.ui-resizable-border-n {
	border-top: 1px solid $form-border-focus-color;
	height: 5px;
	margin: 0 .25rem;
	flex: 1;
}

.ui-resizable-border-e {
	border-right: 1px solid $form-border-focus-color;
	width: 5px;
	margin: .25rem 0;
	flex: 1;
}

.ui-resizable-border-s {
	border-bottom: 1px solid $form-border-focus-color;
	height: 5px;
	margin: 0 .25rem;
	flex: 1;
}

.ui-resizable-border-w {
	border-left: 1px solid $form-border-focus-color;
	width: 5px;
	margin: .25rem 0;
	flex: 1;
}

.ui-resizable-n {
	@extend %ui-resizable;
	cursor: ns-resize;
	height: 5px;
	width: 100%;
	top: 4px;
	left: 0;

	.ui-resize-dot {
		left: 0;
		right: 0;
		margin: auto;
		bottom: 0;
	}
}

.ui-resizable-ne {
	@extend %ui-resize-dot;
	cursor: nesw-resize;
	right: 0;
	top: 0;
}

.ui-resizable-nw {
	@extend %ui-resize-dot;
	cursor: nwse-resize;
	left: 0;
	top: 0;
}

.ui-resizable-e {
	@extend %ui-resizable;
	cursor: ew-resize;
	width: 5px;
	right: 4px;
	top: 0;
	height: 100%;

	.ui-resize-dot {
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
}

.ui-resizable-s {
	@extend %ui-resizable;
	cursor: ns-resize;
	height: 5px;
	width: 100%;
	bottom: 5px;
	left: 0;

	.ui-resize-dot {
		left: 0;
		right: 0;
		margin: auto;
		bottom: -5px;
	}
}

.ui-resizable-se {
	@extend %ui-resize-dot;
	cursor: nwse-resize;
	right: 0;
	bottom: 0;
}

.ui-resizable-sw {
	@extend %ui-resize-dot;
	cursor: nesw-resize;
	left: 0;
	bottom: 0;
}

.ui-resizable-w {
	@extend %ui-resizable;
	cursor: ew-resize;
	width: 5px;
	left: 4px;
	top: 0;
	height: 100%;

	.ui-resize-dot {
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
}

.ui-inner-handles {
	.ui-resizable-n {
		top: 0;
	}

	.ui-resizable-ne {
		top: -4px;
		right: -4px;
	}

	.ui-resizable-nw {
		top: -4px;
		left: -4px;
	}

	.ui-resizable-e {
		right: 0;
	}

	.ui-resizable-s {
		bottom: 0;
	}

	.ui-resizable-se {
		bottom: -4px;
		right: -4px;
	}

	.ui-resizable-sw {
		bottom: -4px;
		left: -4px;
	}

	.ui-resizable-w {
		left: 0;
	}
}

%ui-resize-dot {
	z-index: 90;
	width: 7px;
	height: 7px;
	position: absolute;
	background-color: $ui-bg-color;
	border: 1px solid $form-border-focus-color;
	border-radius: 100%;
}

%ui-resizable {
	z-index: 90;
	position: absolute;
	display: flex;
}

.dashbrd-widget-placeholder {
	border-color: darken($body-bg-color, 6%) !important;
	background-color: darken($body-bg-color, 6%) !important;
}

.dashbrd-widget-draggable {
	border-color: $action-border-color !important;
	border-bottom-color: darken($action-border-color, 1%) !important;
	box-shadow: 0 4px 20px 0 $action-shadow-color;
}

.dashbrd-widget {
	min-width: 250px;
	margin: 0 10px 10px 0;
	background-color: $ui-bg-color;
	border: 1px solid $ui-border-color;

	.list-table {
		border: 0;

		th {
			@extend %dashbrd-widget-td;
		}

		td {
			@extend %dashbrd-widget-td;
		}

		tbody tr {
			&:last-child td {
				border-bottom: 1px solid $table-border-color;
			}
		}
	}

	.msg-bad,
	.msg-good,
	.msg-warning {
		margin: 0 10px;
	}

	&.dashbrd-widget-fluid {
		margin-right: 0;
	}
}

%nothing-to-show {
	color: $font-alt-color;
	text-align: center;
	transition: 0s;

	td:hover {
		background-color: $ui-bg-color;
	}
}

%dashbrd-widget-td {
	&:first-child {
		padding-left: 10px;
	}

	&:last-child {
		padding-right: 10px;
	}
}

.dashbrd-widget-head {
	position: relative;
	padding: 8px 60px 8px 10px;

	h4 {
		color: widget-head-font-color($font-color);
		font-weight: bold;
	}

	ul {
		position: absolute;
		top: 0;
		right: 0;

		li {
			display: block;
			float: left;
			padding: 0;

			select {
				margin: 4px 0;
			}
		}
	}
}

.dashbrd-widget-foot {
	text-align: right;
	color: $font-alt-color;
	margin: 0 10px;

	li {
		display: inline-block;
		padding: 8px 0 8px 13px;
	}
}

.dashbrd-widget-graph-link {
	display: block;

	&:link {
		border: 0;
	}
}

// Action Menus, Pop-up Menus.
.menu-popup {
	position: absolute;
	z-index: 1001;
	padding: 5px 15px 5px 25px;
	min-width: 166px;
	max-width: 250px;
	background-color: $ui-bg-color;
	border: 1px solid $action-border-color;
	border-bottom-color: darken($action-border-color, 1%);
	box-shadow: 0 4px 20px 0 $action-shadow-color;

	&:focus {
		outline: none;
	}

	li {
		display: block;

		div {
			border-top: 1px solid $table-border-color;
			margin: 5px -15px 5px -25px;
		}
	}

	.menu-popup-item {
		display: block;
		height: 24px;
		line-height: 24px;
		cursor: pointer;
		color: $font-color;
		text-decoration: none;
		border: 0;
		outline: 0;
		padding: 0 15px 0 25px;
		margin: 0 -15px 0 -25px;
		position: relative;
		@extend %overflow-ellipsis;
		transition: background-color .2s ease-out;

		&:hover,
		&:focus,
		&:active,
		&.highlighted {
			background-color: $action-hover-color;
		}

		&.selected {
			&::before {
				display: block;
				width: 24px;
				height: 24px;
				position: absolute;
				left: 0;
				content: '';
				background: url($sprite-path) no-repeat -5px -835px;
			}
		}

		.arrow-right {
			position: absolute;
			right: 10px;
			top: 8px;
			height: auto;
			line-height: auto;
			padding: 0;
			margin: 0;
			border-left-color: $font-alt-color;
		}

		&[class*='icon-'] {
			&::before {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 22px;
				height: 22px;
				content: "";
			}
		}
	}

	.menu-popup-item-disabled {
		display: block;
		height: 24px;
		line-height: 24px;
		color: $font-alt-color;
		border: 0;
		cursor: default;
	}

	h3 {
		height: 24px;
		line-height: 24px;
		@extend %overflow-ellipsis;
	}

	&.page-title-submenu::before {
		content: '';
		position: absolute;
		top: -7px;
		left: 10px;
		width: 12px;
		height: 12px;
		background-color: $ui-bg-color;
		border-top: 1px solid $action-border-color;
		border-left: 1px solid $action-border-color;
		transform: rotate(45deg);
	}
}

.overlay-dialogue {
	display: table;
	position: absolute;
	z-index: 1000;
	padding: 15px 10px 10px;
	background-color: $ui-bg-color;
	border: 1px solid $action-border-color;
	border-bottom-color: darken($action-border-color, 1%);
	box-shadow: 0 4px 20px 0 $action-shadow-color;

	&.modal {
		position: fixed;
		overflow: hidden;
		margin: 0 10px;

		.overlay-dialogue-body {
			overflow: auto;
			overflow-x: hidden;
			width: 100%;
			max-height: calc(100vh - 190px);
			max-width: inherit;
			margin: 0 -10px 10px;
			padding: 0 10px;
			@extend %webkit-scrollbar;

			.table-forms {
				.table-forms-td-right {
					padding-right: 8px;
				}

				.table-forms-row-with-second-field {
					position: relative;
					transform: scale(1);

					.table-forms-second-column {
						position: absolute;
						top: 5px;
						right: 8px;
					}
				}
			}

			.columns-wrapper {
				.column-50:last-of-type {
					margin-left: 10px;
				}
			}
		}

		.overlay-dialogue-controls {
			text-align: right;
			padding: 0 0 10px;

			li {
				display: inline;
				padding-left: 10px;
			}
		}

		> .overlay-close-btn {
			position: relative;
			float: right;
			top: -13px;
			right: -8px;
		}
	}

	&.sticked-to-top {
		top: 50px;
	}

	&.modal-popup {
		max-width: 1024px;

		&.modal-popup-medium {
			min-width: 450px;
		}

		&.modal-popup-generic {
			min-width: 650px;
		}
	}

	.hintbox-scrollable {
		overflow: auto;
		width: 100%;
		max-height: calc(100vh - 190px);
		max-width: 45vw;
		white-space: nowrap;
		@extend %webkit-scrollbar;
	}

	.hintbox-description {
		overflow: auto;
		max-height: 240px;
		max-width: 800px;
		@extend %webkit-scrollbar;
	}

	.msg-bad,
	.msg-good,
	.msg-warning {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 4;
		margin: 0 0 10px;
	}

	.list-table {
		white-space: normal;
		border: 0;

		th {
			@extend %dashbrd-widget-td;
		}

		td {
			@extend %dashbrd-widget-td;
		}
	}

	.table-paging {
		border: 0;
		border-top: 1px solid $table-border-color;
	}

	.table-forms-td-right {
		td {
			vertical-align: middle;

			label {
				display: block;
			}
		}
	}

	.dashbrd-widget-head {
		margin: -10px -10px 6px;
	}

	.maps-container {
		max-height: 128px;
		overflow-y: auto;
		margin-left: -10px;
		@extend %webkit-scrollbar;
	}

	.table-forms-second-column {
		float: right;
		line-height: 24px;
	}
}

// Multiline input control.
.multilineinput-control {
	display: flex;
	width: 100%;

	input[type=text] {
		overflow: hidden;
		cursor: pointer;
		white-space: nowrap;
		text-overflow: ellipsis;
		border-right: 0;
		width: 100%;

		&[readonly] {
			background: $form-bg-color !important;
			border-color: $form-border-color;
			color: $form-font-color;
		}

		&.monospace-font {
			padding-top: 1px;
		}
	}

	&.editable {
		background-color: $form-bg-color !important;
		border-color: $form-disabled-font-color;
	}

	button {
		position: relative;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;

		&::after {
			background: url($sprite-path) no-repeat -47px -478px;
			content: '';
			position: absolute;
			left: 3px;
			top: 4px;
			height: 14px;
			width: 15px;
		}

		&:not([disabled]):not([readonly]) {
			background-color: $form-bg-color;
			border-color: $form-border-color;

			&:hover {
				background-color: $btn-form-hover-color;
			}
		}
	}

	&.multilineinput-readonly {
		input[type=text][readonly] {
			background-color: $form-disabled-bg-color !important;
		}
	}

	&.multilineinput-disabled {
		input[type=text] {
			cursor: default;
		}

		button::after {
			opacity: .5;
		}
	}
}

.multilineinput-modal {
	$line-height: 18px;

	min-width: 960px;

	.multilineinput-container {
		padding: 1px;
		position: relative;
		display: flex;
		overflow: hidden;
	}

	.multilineinput-line-numbers {
		counter-reset: line;
		overflow: hidden;
		padding: 1px 5px 1px 0;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;

		li {
			color: $font-alt-color;
			line-height: $line-height;
			text-align: right;
			min-width: 24px;

			&::before {
				counter-increment: line;
				content: counter(line);
				user-select: none;
			}
		}
	}

	.multilineinput-label {
		color: $font-alt-color;
		line-height: 24px;
	}

	.multilineinput-textarea {
		flex: 1;
		line-height: $line-height;
		resize: none;
		white-space: pre;
		padding: 0 5px;
		z-index: 20;

		&::-webkit-scrollbar {
			height: 9px;
		}
	}

	.multilineinput-symbols-remaining {
		color: $font-alt-color;
		float: left;
		line-height: 24px;
	}
}

// Flexible textarea.
.textarea-flexible-container {
	td {
		line-height: 22px;

		&.textarea-flexible-parent {
			vertical-align: top;
		}

		button {
			line-height: normal;
		}
	}
}

.textarea-flexible {
	display: block;
	min-height: 24px;
	overflow: hidden;
	resize: none;
	word-break: break-all;
	height: 24px;
	line-height: 14px;
	white-space: break-spaces;
}

// Map widget back to parent button.
.btn-back-map-container {
	text-align: left;
	position: absolute;
	left: -1px;
	max-width: 100%;

	a {
		&:focus,
		&:hover {
			outline: none;

			.btn-back-map {
				background-color: $btn-back-background-hover;
				border: $btn-border-color solid 1px;

				.btn-back-map-content {
					display: inline-block;
					line-height: 24px;
					padding: 0 6px 0 0;
					flex: auto;
					@extend %overflow-ellipsis;
				}
			}
		}
	}

	.btn-back-map {
		border: $ui-border-color solid 1px;
		border-radius: 0 2px 2px 0;
		background-color: $btn-back-map-background-color;
		color: $btn-back-text-color;
		margin-top: 10px;
		padding: 0;
		display: flex;
		height: 24px;
		line-height: 24px;
		vertical-align: middle;
		text-decoration: none;

		.btn-back-map-content {
			display: none;
		}

		.btn-back-map-icon {
			margin-left: 5px;
			display: inline-block;
			flex: 1 0 auto;
			width: 28px;
			height: 24px;
			vertical-align: middle;
			background: url($sprite-path) no-repeat -85px -691px;
		}
	}
}

.overlay-dialogue-body {
	margin: 0 0 25px;
	white-space: nowrap;

	.debug-output {
		margin: 10px 0 0;
	}
}

.overlay-dialogue-footer {
	text-align: right;

	button {
		margin: 0 0 0 10px;
	}
}

.overlay-bg {
	background-color: $overlay-bg-color;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	opacity: .35;
}

.calendar {
	width: 200px;

	.calendar-year,
	.calendar-month {
		&.highlighted {
			background-color: $action-hover-color;
		}

		&:focus {
			outline: none;
		}
	}

	table {
		width: 100%;
		margin: 5px 0;

		thead {
			text-transform: $font-transform;
			color: $font-alt-color;
		}

		tbody {
			text-align: center;

			td {
				transition: background-color .2s ease-out;

				&.selected {
					background-color: $ui-bg-selected-color;
					color: $white;

					&:hover {
						background-color: darken($ui-bg-selected-color, 4%);
					}
				}

				&:hover {
					background-color: $action-hover-color;
					cursor: pointer;
				}

				&.highlighted {
					@include btn-hover-active($btn-font-color, $btn-bg-color);
					cursor: pointer;
				}

				&:focus {
					outline: none;
				}

				span {
					z-index: -1;
					padding: 4px;
					display: block;
				}
			}
		}
	}
}

.calendar-header {
	text-align: center;

	.btn-grey {
		border: 0;
		background-color: $transparent;
	}
}

.calendar-year {
	height: 24px;
	line-height: 26px;
	display: table;
	width: 100%;

	button:first-child {
		float: left;
	}

	button:last-child {
		float: right;
	}

	button:hover {
		background-color: $action-hover-color;
		cursor: pointer;
	}
}

.calendar-month {
	@extend .calendar-year;
}

.calendar-time {
	text-align: center;

	input[type="text"] {
		width: 32px;
	}
}

.calendar-footer {
	margin: 26px 0 0;
	text-align: right;

	.btn-grey {
		float: left;
		margin-top: 0;
	}
}

// Problem notification overlay.
.notif {
	width: 250px;

	.dashbrd-widget-head {
		margin: -11px 0 7px -9px;
		padding: 0;

		ul {
			position: relative;
			display: inline-block;

			li {
				float: none;
				display: inline-block;
			}
		}
	}

}

.notif-body {
	max-height: 600px;
	padding: 0 5px 0 0;
	overflow-y: auto;
	@extend %webkit-scrollbar;

	h4 {
		display: block;
		max-width: 250px;
		padding-bottom: .083em;
		@extend %overflow-ellipsis;
	}

	p {
		margin: .25em 0 0;
	}

	li {
		padding: 0 0 10px 19px;

		&:last-child {
			padding-bottom: 0;
		}
	}
}

.notif-indic {
	width: 14px;
	height: 14px;
	float: left;
	margin: 2px 0 0 -19px;
	border-radius: 2px;

	.notif-indic-snooze {
		width: 14px;
		height: 14px;
		float: left;
		margin-top: 20px;
		background: url($sprite-path) no-repeat -11px -587px;
	}

}

.notif-indic-container {
	border-top: 1px solid $table-border-color;
	margin: 0 0 0 -19px;
	padding: 14px 0 0;

	.notif-indic {
		float: none;
		display: inline-block;
		margin: 0 2px 0 0;
	}
}

// Maps, Screens, Graphs.
.screen-table {
	background-color: $ui-bg-color;
	width: 100%;

	td {
		padding: 2px 3px;
	}

	.table-forms {
		text-align: left;
	}

	.list-table {
		border: 0;

		td {
			text-align: left;
			padding: 6px 5px;
			border: 0;
			border-bottom: 1px solid $table-border-color;

			&.list-table-footer {
				color: $font-alt-color;
				text-align: right;
			}
		}
	}

	.dashbrd-widget {
		margin: 0;
		border: 0;

		th {
			padding: 6px 5px;
		}
	}

	.dashbrd-widget-head {
		text-align: left;
		padding: 4px 5px;

		li {
			line-height: 2.9em;
		}
	}

	.dashbrd-widget-foot {
		margin: 0;
	}

	.nothing-to-show {
		td {
			text-align: center !important;
		}
	}
}

.dashed-border {
	td {
		border: 1px dashed $table-border-color;
	}
}

.top {
	vertical-align: top;
}

.right {
	text-align: right !important;
}

.bottom {
	vertical-align: bottom;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.middle {
	vertical-align: middle;
}

.no-padding {
	padding: 0 !important;
}

.graph-selection {
	position: absolute;
	z-index: 98;
	overflow: hidden;
	background-color: rgba($yellow, .35);
	border: 1px solid rgba($dark-yellow, .6);
	border-top: 0;
	border-bottom: 0;
}
.svg-graph-selection {
	fill: rgba($yellow, .35);
	stroke: rgba($dark-yellow, .6);
	stroke-width: 1px;
}
.svg-graph-selection-text {
	fill: $font-color;
}
.svg-helper {
	stroke-opacity: .35;
	stroke: $red;
	stroke-width: 2px;
}
.svg-point-highlight {
	fill: $font-color !important;
	fill-opacity: .5 !important;
}

.svg-graph-preview {
	margin-top: 10px;
	min-width: 960px;
	height: 300px;
	position: relative;

	> div {
		background: $ui-bg-color;
		height: 300px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		z-index: 3; // More than z-index of form controls, less than z-index of .msg-*.
	}
}

.svg-graph {
	display: block;
}

.svg-single-item-graph-legend,
.svg-single-two-items-graph-legend,
.svg-graph-legend {
	// Legend single line height is 18. Value should be synchronized with $legend_height in 'CSvgGraphHelper.php'.
	$svg-legend-line-height: 18px;
	$svg-legend-handle-height: 4px;

	overflow-y: hidden;
	white-space: normal;
	margin: 0 10px;
	line-height: $svg-legend-line-height;

	div {
		display: inline-block;
		margin: 0 4px;
		font-size: 12px;
		line-height: 1.1;
		vertical-align: bottom;
		min-width: 120px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		border: 0 none transparent;
	}

	div::before {
		content: ' ';
		display: inline-block;
		margin-right: 4px;
		width: 10px;
		height: 0;
		vertical-align: middle;
		margin-top: -$svg-legend-handle-height;
		border-top-width: $svg-legend-handle-height;
		border-top-style: solid;
		border-top-color: inherit;
	}
}
.svg-graph-legend div {
	max-width: 30%;
}
.svg-single-two-items-graph-legend div {
	max-width: 50%;
}

.svg-graph-hintbox {
	font-size: 12px;
	line-height: 18px;
	white-space: nowrap;
	min-width: 145px;

	.table-paging {
		min-height: 18px;
		padding: 0 0 2px;
		border: 0;
		top: 2px;

		.paging-btn-container {
			min-height: inherit;
		}
	}

	.list-table tbody tr:last-child td {
		border-bottom-style: none;
		box-shadow: none;
	}

	li {
		padding-left: 23px;

		.svg-graph-hintbox-item-color {
			margin: 3px 10px 3px -20px;
			width: 10px;
			height: 10px;
			float: left;
			display: block;
		}
	}

	.header {
		margin: 0 0 10px 3px;
	}
}

.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	background-color: rgba($yellow, .35);
	border: 1px solid rgba($dark-yellow, .6);
}

#map-area {
	.map-element-area-bg {
		background-color: rgba($action-hover-color, .35);
	}
}

.map-element-selected {
	border: 3px dashed $dark-yellow;
	margin: -3px;
}

// Debug, Overlay Description.
.debug-output {
	display: none;
	max-height: 600px;
	overflow-y: auto;
	padding: 10px;
	margin: 10px;
	background-color: $lighter-yellow;
	border: 1px solid $ui-border-color;
	@extend %webkit-scrollbar;
}

// ZBX_STYLE_BTN_DEBUG
.btn-debug {
	position: fixed;
	bottom: 10px;
	right: 35px;
	z-index: 15000;
	color: $btn-form-font-color;
	background-color: $btn-form-bg-color;
	border-color: $btn-form-border-color;
	opacity: 0;
	transition: opacity .2s ease-out;

	&.visible {
		opacity: 0.75;
	}

	&:hover {
		color: $btn-form-font-color;
		background-color: $btn-form-hover-color;
		border-color: $btn-form-border-color;
	}

	&:focus {
		color: $btn-form-font-color;
		background-color: $btn-form-hover-color;
		border-color: $form-border-focus-color;
	}

	&:active {
		color: $btn-form-font-color;
		background-color: $btn-form-hover-color;
		border-color: $form-border-focus-color;
	}
}

.overlay-descr {
	max-height: 150px;
	overflow-y: auto;
	padding: 0;
	margin: 5px 0;
	background-color: $ui-bg-color;
	@extend %webkit-scrollbar;
	@extend %scroll-vert-shadow;
}

.overlay-descr-url {
	padding: 3px 0 7px;
	@extend %overflow-ellipsis;
}

%scroll-vert-shadow {
	background:
		// Shadow covers.
		linear-gradient($ui-bg-color 30%, rgba($ui-bg-color, 0)),
		linear-gradient(rgba($ui-bg-color, 0), $ui-bg-color 70%) 0 100%,
		// Shadows.
		radial-gradient(50% 0, farthest-side, rgba($action-shadow-color, .4), rgba($action-shadow-color, 0)),
		radial-gradient(50% 100%, farthest-side, rgba($action-shadow-color, .4), rgba($action-shadow-color, 0)) 0 100%;
	background:
		// Shadow covers.
		linear-gradient($ui-bg-color 30%, rgba($ui-bg-color, 0)),
		linear-gradient(rgba($ui-bg-color, 0), $ui-bg-color 70%) 0 100%,
		// Shadows.
		radial-gradient(farthest-side at 50% 0, rgba($action-shadow-color, .4), rgba($action-shadow-color, 0)),
		radial-gradient(farthest-side at 50% 100%, rgba($action-shadow-color, .4), rgba($action-shadow-color, 0)) 0 100%;
	background-repeat: no-repeat;
	background-color: $ui-bg-color;
	background-size: 100% 40px, 100% 40px, 100% 4px, 100% 4px;
	background-attachment: local, local, scroll, scroll;
}

// Alerts.
.green {
	color: $green;
}

a.green {
	@extend .green;

	&:hover,
	&:focus {
		color: $link-hover-color;
	}
}

.red {
	color: $red;
}

a.red {
	@extend .red;

	&:hover,
	&:focus {
		color: $link-hover-color;
	}
}

select.red {
	@extend .red;
}

select {
	option.red {
		@extend .red;
	}
}

.orange {
	color: $orange;
}

a.orange {
	@extend .orange;

	&:hover,
	&:focus {
		color: $link-hover-color;
	}
}

.yellow {
	color: $dark-yellow;
}

a.yellow {
	@extend .yellow;

	&:hover,
	&:focus {
		color: $link-hover-color;
	}
}

.grey {
	color: $font-alt-color;
}

a.grey {
	@extend .grey;

	&:hover,
	&:focus {
		color: $link-hover-color;
	}
}

.blue {
	color: $blue;
}

a.blue {
	@extend .blue;

	&:hover,
	&:focus {
		color: $link-hover-color;
	}
}

.teal {
	color: $teal;
}

a.teal {
	@extend .teal;

	&:hover,
	&:focus {
		color: $link-hover-color;
	}
}

a.link-action {
	color: $font-color;

	&.red {
		color: $red;
	}

	&.orange {
		color: $orange;
	}

	&.yellow {
		color: $dark-yellow;
	}

	&.green {
		color: $green;
	}

	&.grey {
		color: $font-alt-color;
	}

	&:hover {
		color: $link-hover-color;
		border-bottom: 1px solid rgba($link-hover-color, .5);
	}

	&:focus {
		color: $link-hover-color;
	}
}

.progress-bar-container {
	display: inline-block;
	white-space: nowrap;
	position: relative;

	a {
		border: none !important;

		&:hover,
		&:focus {
			.progress-bar-label {
				display: block;
			}
		}
	}
}

.progress-bar-bg {
	padding: 3px 0 2px;
	font-size: $font-h3-size;
	line-height: 1em;
	display: inline-block;

	&.green-bg {
		background-color: darken(desaturate($alt-green, 10%), 16%);
	}

	&.red-bg {
		background-color: darken(desaturate($alt-red, 10%), 5%);
	}
}

.progress-bar-label {
	display: none;
	color: $white;
	font-size: $font-h3-size;

	span {
		position: absolute;

		&:first-child {
			left: .35em;
		}

		&:last-child {
			right: .35em;
		}
	}
}

%status {
	padding: 2px 3px 1px;
	font-size: $font-h3-size;
	text-transform: $font-transform;
	text-align: center;
	min-width: .7em;
	line-height: 1em;
	display: inline-block;
	border-radius: 2px;

	&:not(:last-of-type) {
		border-right: 0;
	}
}

.status-container {
	display: inline-block;
	white-space: nowrap;
	margin: 1px 3px 1px 0;

	&:last-child {
		margin: 0;
	}

	span {
		border-radius: 0;

		&:only-child {
			border-radius: 2px;
		}

		&:first-of-type:not(:only-child) {
			border-radius: 2px 0 0 2px;
		}

		&:last-of-type:not(:only-child) {
			border-radius: 0 2px 2px 0;
		}
	}

	.status-na-bg,
	.status-info-bg,
	.status-warning-bg,
	.status-average-bg,
	.status-high-bg,
	.status-disaster-bg {
		@extend %status;
		border: 1px solid rgba($font-color, .2);
		border-radius: 0;
	}
}

.status-green {
	color: $white;
	border: 1px solid darken(desaturate($alt-green, 10%), 20%);
	background-color: darken(desaturate($alt-green, 10%), 16%);
	@extend %status;
}

.status-red {
	color: $white;
	border: 1px solid darken(desaturate($alt-red, 10%), 9%);
	background-color: darken(desaturate($alt-red, 10%), 5%);
	@extend %status;
}

.status-grey {
	color: $form-disabled-font-color;
	background-color: $form-disabled-bg-color;
	border: 1px solid $form-disabled-border-color;
	@extend %status;
}

.status-dark-grey {
	border: 1px solid darken(desaturate($alt-blue-grey, 10%), 12%);
	background-color: darken(desaturate($alt-blue-grey, 10%), 8%);
	@extend %status;
}

.status-yellow {
	color: $white;
	border: 1px solid darken(desaturate($alt-yellow, 9%), 20%);
	background-color: darken(desaturate($alt-yellow, 9%), 18%);
	@extend %status;
}

.status-disabled-bg {
	color: $form-disabled-font-color;
	background-color: $form-disabled-bg-color;
	border: 1px solid rgba($font-color, .2);
	@extend %status;
}

.tag {
	display: inline-block;
	color: $font-selected-color;
	background-color: $ui-bg-selected-color;
	margin: 1px 3px 1px 0;
	padding: 2px 3px;
	line-height: 1em;
	max-width: 133px;
	vertical-align: middle;
	@extend %overflow-ellipsis;
	border-radius: 2px;

	&:last-child {
		margin: 0;
	}
}

.green-bg {
	background-color: $alt-green;
}

.red-bg {
	background-color: $alt-red;
}

// Severity statuses.
@if $theme-name == 'blue' or $theme-name == 'dark' {
	td[class] {
		+ {
			td.na-bg,
			td.normal-bg,
			td.info-bg,
			td.average-bg,
			td.warning-bg,
			td.high-bg,
			td.disaster-bg {
				border-left: 1px dotted $table-border-color;
			}
		}
	}
}

@each $severity-type, $color in (
	na-bg: $alt-blue-grey,
	normal-bg: $alt-green,
	info-bg: $alt-dark-blue,
	average-bg: $alt-orange,
	warning-bg: $alt-yellow,
	high-bg: $alt-dark-orange,
	disaster-bg: $alt-red,
) {
	.#{$severity-type} {
		color: darken($color, 45%);
		position: relative;

		@if $severity-type == normal-bg {
			background-color: $color;

			a.link-action {
				color: darken($color, 45%);
			}
		}
		@else {
			a.link-action,
			input[type="radio"]:enabled:checked + label {
				color: darken($color, 45%);
			}
		}
	}

	// Dynamically generated classes:
	//  .log-na-bg
	//  .log-normal-bg
	//  .log-info-bg
	//  .log-average-bg
	//  .log-warning-bg
	//  .log-high-bg
	//  .log-disaster-bg
	.log-#{$severity-type} {
		color: darken($color, 45%);
		background-color: $color;
	}
}

.na-bg,
.normal-bg,
.info-bg,
.average-bg,
.warning-bg,
.high-bg,
.disaster-bg {
	a {
		transition: none;
	}

	&.blink-hidden {
		background-color: transparent;

		a {
			color: $font-color;
		}
	}
}

.inactive-bg {
	color: darken($alt-red, 45%);
	background-color: $alt-red;
}

td.inactive-bg {
	@extend .inactive-bg;
}

// Filter checkboxes.
.table-forms-second-column {
	display: inline-block;
	width: 50%;
	min-width: 200px;
	text-align: right;

	.second-column-label {
		padding: 0 10px;
	}
}

// Event status colors.
.problem-unack-fg {
	color: $problem-unack-fg-color;
}

.problem-ack-fg {
	color: $problem-ack-fg-color;
}

.ok-unack-fg {
	color: $ok-unack-fg-color;
}

.ok-ack-fg {
	color: $ok-ack-fg-color;
}

%found-bg {
	background-color: $lighter-yellow;
}

// Plus/Add icon.
.plus-icon {
	display: inline-block;
	@extend %plus-icon;
}

%plus-icon {
	width: 2px;
	height: 8px;
	position: relative;

	&::after {
		content: '';
		width: 8px;
		height: 2px;
		top: 3px;
		left: -3px;
		position: absolute;
	}
}

// Close/Remove icon.
%close-icon {
	display: block;
	padding: 0;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	color: $font-alt-color;
	font-size: $font-h2-size;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	opacity: .5;
	transition: opacity .2s ease-out;

	&::before {
		content: '\00d7';
	}

	&:hover,
	&:focus,
	&:active {
		color: $font-alt-color;
		text-decoration: none;
		opacity: 1;
	}
}

.remove-btn {
	position: absolute;
	top: 5px;
	right: 5px;
	min-height: auto;
	border: 0;
	background-color: $transparent !important;
	@extend %close-icon;
	border-radius: 2px;

	&:focus {
		box-shadow: none;
	}
}

.overlay-close-btn {
	position: absolute;
	z-index: 1000;
	top: 1px;
	right: 1px;
	min-height: auto;
	border: 0;
	background-color: $transparent !important;
	@extend %close-icon;
	border-radius: 2px;
}

a.overlay-close-btn {
	@extend .overlay-close-btn;
}

.subfilter-disable-btn {
	width: 18px;
	height: 18px;
	line-height: 18px;
	color: $font-selected-color;
	background-color: $ui-bg-selected-color;
	@extend %close-icon;
	border-radius: 2px;
	opacity: 1;

	&:hover {
		color: darken($font-selected-color, 5%);
	}

	&:focus,
	&:active {
		color: darken($font-selected-color, 10%);
	}
}

// Color picker.
.color-picker {
	height: 20px;
	white-space: nowrap;

	div {
		display: inline-block;
		width: 18px;
		height: 18px;
		border: 1px solid $ui-bg-color;

		&:hover {
			border-color: $alt-dark-blue;
			box-shadow: inset 0 0 0 1px $ui-bg-color;
			cursor: pointer;
		}

		&:active {
			box-shadow: inset 0 0 0 2px $ui-bg-color;
			cursor: pointer;
		}
	}
}

.input-color-picker {
	position: relative;
	display: inline-block;

	div {
		position: absolute;
		top: 2px;
		left: 2px;
		width: 18px;
		height: 18px;
		border: 1px solid $form-border-color;
		background: url($sprite-path) no-repeat -323px -411px;
		cursor: pointer;
	}

	input[readonly],
	input:disabled {
		color: $form-disabled-font-color !important;

		+ div {
			cursor: default;
		}
	}

	input:disabled + div {
		background: $form-disabled-font-color !important;
		border: 1px solid $form-disabled-font-color;
	}

	input[type="text"] {
		padding-left: 25px;
	}
}

// Preloader.
@keyframes is-loading-kf {
	to {
		transform: rotate(360deg);
	}
}

.is-loading {
	pointer-events: none;

	&::before {
		background-color: rgba($ui-bg-color, .8);
		content: 'loading'; // For screen-reader
		text-indent: 200%;  // For screen-reader, for IE 200% instead of 100%
		overflow: hidden;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 5; // More than z-index of .msg-*.
	}

	&::after {
		background-color: rgba($ui-bg-color, .8);
		border: 2px solid $preloader-color;
		border-bottom-color: $preloader-accent-color;
		border-radius: 50%;
		box-shadow: 0 0 0 7px rgba($ui-bg-color, .8);
		width: 20px;
		height: 20px;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		animation: is-loading-kf .6s infinite linear;
		z-index: 5; // More than z-index of .msg-*.
		content: '';
	}

	&.is-loading-fadein {
		&::before {
			opacity: 0;
			animation: fadein 2s ease-in .5s normal forwards;
		}

		&::after {
			opacity: 0;
			animation: fadein 2s ease-in .5s normal forwards, is-loading-kf .6s infinite linear;
		}

		.delayed-15s {
			&::before,
			&::after {
				animation-delay: 15s;
			}
		}
	}
}

button {
	&.is-loading {
		position: relative;

		&::before {
			background: none;
		}

		&::after {
			box-shadow: none;
			background: none;
			border: 1px solid $preloader-disabled-color;
			border-bottom-color: $preloader-accent-color;
			width: 12px;
			height: 12px;
		}
	}
}

span {
	&.is-loading {
		position: relative;
		display: inline-block;
		min-width: 40px;
		min-height: 40px;
	}
}

.dashbrd-grid-widget-content,
.dashbrd-grid-iterator-content {
	&.is-loading::before {
		margin: calc(.25rem + 1px);
	}
}

.overlay-dialogue.modal .overlay-dialogue-body {
	&.is-loading {
		overflow: hidden;

		&:before {
			top: 42px;
			bottom: 42px;
		}
	}
}

.menu-popup-preloader {
	background: $preloader-bg-color;
	border: 1px solid $action-border-color;
	box-shadow: 0 4px 20px 0 $action-shadow-color;
	height: 128px;
	width: 128px;
	position: fixed;
	right: auto;
	bottom: auto;
	z-index: 1010;

	&::before {
		background: $preloader-bg-color;
	}
}

$browser-logos: (
	chrome: 0 0,
	ff: -66px 0,
	ed: 0 -66px,
	opera: -66px -66px,
	safari: 0 -132px
);

%browser-logo-style {
	background: url($browser-sprite-path) no-repeat;
	width: 66px;
	height: 66px;
	margin: 0 auto;
	margin-bottom: 5px;
}

// Dynamically generated classes for the browser logo:
//  .browser-logo-chrome
//  .browser-logo-ff
//  .browser-logo-ed
//  .browser-logo-opera
//  .browser-logo-safari
@each $class, $bg-position in $browser-logos {
	.browser-logo-#{$class} {
		@extend %browser-logo-style;
		background-position: $bg-position;
	}
}

.browser-warning-container {
	margin-top: 5%;
	margin-left: auto;
	margin-right: auto;
	width: 766px;
	text-align: center;
	padding: 28px 28px 10px;
	@extend .table-forms-container;

	h2 {
		text-align: left;
	}

	p {
		margin: .7em 0;
		text-align: left;
	}

	li {
		display: inline-block;
		margin: 25px 20px;
	}
}

.browser-warning-footer {
	border-top: 1px solid $table-border-color;
	margin: 25px 0 0;
	padding: 10px 0 0;
	text-align: center;
}

// TODO: Legacy
%webkit-scrollbar {
	&::-webkit-scrollbar {
		width: 9px;
	}

	&::-webkit-scrollbar-track {
		background-color: $scrollbar-track-color;
	}

	&::-webkit-scrollbar-thumb {
		background-color: $scrollbar-thumb-color;
		border: 1px solid darken($scrollbar-thumb-color, $scrollbar-thumb-color-darken);
	}
}

// TODO: Legacy
%webkit-hor-scrollbar {
	&::-webkit-scrollbar {
		height: 9px;
	}

	@extend %webkit-scrollbar;
}

%cursor-drag {
	cursor: move; /* fallback if grab cursor is unsupported */
	cursor: grab;
}

%cursor-dragging {
	cursor: move; /* fallback if grabbing cursor is unsupported */
	cursor: grabbing;
}

.cursor-dragging {
	@extend %cursor-dragging;
}

.cursor-move {
	cursor: move;
}

tr.cursor-move {
	td * {
		cursor: move;
	}
}

.cursor-pointer {
	cursor: pointer;
}

.overflow-ellipsis {
	table-layout: fixed;
	@extend %overflow-ellipsis;

	td {
		@extend %overflow-ellipsis;
	}

	th {
		@extend %overflow-ellipsis;

		a {
			@extend %overflow-ellipsis;
		}
	}
}

.rel-container {
	position: relative;
	display: inline-block;
	min-width: 16px;
	white-space: nowrap;

	.icon-info {
		margin-right: 5px;

		&:only-of-type {
			margin-right: 0;
		}

		&:last-child {
			margin-right: 0;
		}
		&.status-green {
			border-right: 1px solid darken(desaturate($alt-green, 10%), 20%);
		}
	}
}

main {
	.server-name {
		float: right;
		margin: 10px;
		color: $font-alt-color;
	}
}

.uppercase {
	text-transform: $font-transform;
}

.flickerfreescreen {
	position: relative;
	overflow: hidden;

	&.is-loading {
		min-height: 64px;

		img {
			opacity: 0;
		}
	}
}

.graph-wrapper {
	display: inline;
}

// Dashboard widget - URL.
.widget-url {
	display: block;
}

// Analog Clock.
.clock {
	display: flex;
	justify-content: center;
	padding: 0 10px;
	height: 100%;
}

.clock-svg {
	flex-grow: 1;
}

.time-zone {
	margin: 0 0 .5em;
	white-space: nowrap;
}

.local-clock {
	margin: .5em 0 0;
	white-space: nowrap;
}

.clock-face {
	fill: $clock-face-color;
}

.clock-hand {
	fill: $clock-hand-color;
}

.clock-hand-sec {
	fill: $clock-hand-sec-color;
}

.clock-lines {
	fill: $clock-lines-color;
}

svg {
	overflow: hidden;
}

.sysmap {
	height: 100%;
	width: auto;
	padding: 0 10px;
	text-align: center;
}

.sysmap-scroll-container {
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	width: calc(100% - 20px);
	border: 10px solid $ui-bg-color;
	background: $ui-bg-color;
	display: block;
	margin: 4px 0;

	.map-container {
		display: table;
	}

	.flickerfreescreen {
		display: inline-block;
	}

	.table-forms-container {
		display: table;
		margin: 0;
		padding: 0;
		border: 0;
	}
}

.sysmap-widget-container {
	overflow: hidden;
	height: 100%;
	display: flex;

	svg {
		flex-grow: 1;
	}
}

.lld-overrides-operations-table {
	white-space: normal;
	word-break: break-word;
}

.overrides-list {
	display: table;
	width: 90%;
	max-width: 738px;
	padding-left: 15px;

	.overrides-list-item {
		display: table-row;

		.remove-btn {
			position: relative;
			right: -73px;
			top: 3px;
		}
	}
}

.overrides-options-list {
	white-space: normal;
	padding: 5px 0 8px;
	margin-bottom: 10px;
	border-bottom: 1px solid $table-border-color;

	> li {
		display: inline-block;
		margin: 2px 7px 2px 0;
		white-space: nowrap;

		> div {
			position: relative;
			padding: 1px 18px 1px 1px;
			background-color: $ui-bg-selected-color;
			border-radius: 2px;

			> span {
				color: lighten($ui-bg-selected-color, 100%);
				padding-left: 8px;
				line-height: 22px;
			}

			> input[type=text] {
				border-style: none;
				line-height: 22px;
				min-height: 22px;
				width: 85px;
			}

			> .subfilter-disable-btn {
				position: absolute;
				right: 0;
				top: 0;
				border: 0;

				&:focus,
				&:hover {
					background: none;
				}
			}
		}
	}
}

.list-accordion-foot {
	> div {
		display: table-cell;
		padding-top: 10px;
	}
}

.color-preview-box {
	height: 24px;
	width: 24px;
	float: left;
	margin-right: 10px;
	cursor: pointer;
	border: 0;
	border-radius: 0;
}

.list-vertical-accordion {
	display: table;
	padding-left: 15px;
	width: calc(100% - 15px);

	.list-accordion-item {
		display: table-row;

		.remove-btn {
			position: relative;
			right: -10px;
			top: 3px;
		}
	}

	.list-accordion-item-head,
	.list-accordion-item-body {
		padding-bottom: 2px;
	}

	.list-accordion-item-closed {
		.multiselect {
			height: 24px;
			overflow: hidden;
		}

		.list-accordion-item-head {
			margin-bottom: 5px;
		}

		.list-accordion-item-body {
			display: none;
		}
	}
}

.display-none {
	display: none;
}

.checkbox-list {
	li {
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 20px;

		label {
			line-height: 16px;
			vertical-align: bottom;
		}
	}
}

.columns-wrapper {
	$column-count: (2, 3);
	$column-size: (
		5: 5%,
		10: 10%,
		15: 15%,
		20: 20%,
		33: 33.33333%,
		35: 35%,
		40: 40%,
		50: 50%,
		75: 75%,
		90: 90%,
		95: 95%
	);

	display: flex;
	flex-wrap: wrap;

	&.columns-nowrap {
		flex-wrap: nowrap;
	}

	// Dynamically generated classes for the columns count:
	//  .columns-2
	//  .columns-3
	@each $count in $column-count {
		&.columns-#{$count} > {
			div,
			li {
				display: block;
				flex: 0 0 (100% / $count);
				max-width: (100% / $count);
			}
		}
	}

	// Dynamically generated classes for the column width:
	//  .column-5
	//  .column-10
	//  .column-15
	//  .column-20
	//  .column-33
	//  .column-35
	//  .column-40
	//  .column-50
	//  .column-75
	//  .column-90
	//  .column-95
	@each $class, $width in $column-size {
		.column-#{$class} {
			flex: 0 0 $width;
			max-width: $width;
		}
	}

	.column-center {
		display: flex;
		justify-content: center;
		text-align: center;
	}

	.column-middle {
		display: flex;
		align-items: center;
	}
}

.preprocessing-list {
	$name-width: 290px;
	$on-fail-width: 100px;
	$action-width: 120px;

	display: block;
	max-width: 930px;
	min-width: 800px;

	> li {
		display: block;
		position: relative;
	}

	.drag-icon {
		position: absolute;
		left: 0;
		top: 5px;
	}

	.list-numbered-item::before {
		content: counter(line) ':';
		flex: 0 0 15px;
		max-width: 15px;
		line-height: 24px;
		padding-right: 5px;
	}

	input[type=text],
	select {
		width: 100%;
		min-width: 0; // https://stackoverflow.com/a/43361500
	}

	input[type=text],
	.btn-link {
		&:not(:last-of-type) {
			margin-right: 10px;
		}
	}

	.preprocessing-list-head,
	.preprocessing-list-foot,
	.preprocessing-step,
	.on-fail-options,
	.step-name,
	.step-parameters,
	.step-on-fail,
	.step-action {
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.step-name,
	.step-parameters,
	.step-on-fail,
	.step-action,
	.on-fail-options > label,
	.on-fail-options > .radio-segmented {
		padding: 5px 5px 5px 0;
	}

	.step-name {
		flex: 0 0 $name-width;
		max-width: $name-width;
	}

	.step-parameters {
		flex: 1;
	}

	.step-on-fail {
		flex: 0 0 $on-fail-width;
		max-width: $on-fail-width;
		justify-content: center;
		text-align: center;
	}

	.step-action {
		flex: 0 0 $action-width;
		max-width: $action-width;
		padding-right: 0;
	}

	.on-fail-options {
		padding-right: $on-fail-width + $action-width + 5px;
		margin-bottom: 5px;

		> label {
			padding-left: 30px;
		}

		input[type=text] {
			flex: 1;
		}
	}

	.preprocessing-list-head {
		color: $font-alt-color;
		line-height: 14px;

		.step-name {
			padding-left: 30px;
		}
	}

	.preprocessing-list-item {
		.step-name {
			padding-left: 10px;
		}
	}

	.preprocessing-list-foot {
		justify-content: space-between;

		.step-action {
			height: 24px;

			+ .step-action:last-child {
				margin-left: auto;
				justify-self: flex-end;
			}
		}
	}
}

.navtree {
	$max_depth: 10;

	@keyframes fadein {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.tree {
		width: 100%;
		height: 100%;

		.tree-list {
			list-style: none;

			&.root > .tree-item > .tree-row > .content > .margin-lvl {
				flex: 0 0 15px;
			}

			> .tree-item.ui-sortable-helper .content {
				padding-left: 5px;
			}

			@for $i from 0 through $max_depth {
				&[data-depth="#{$i}"] > .tree-item {
					> .tree-row > .content > .margin-lvl {
						flex: 0 0 ($i * 15px + 10px);
					}
					&.ui-sortable-helper {
						margin-left: ($i * 15px + 10px);

						> .tree-row > .content > .margin-lvl {
							display: none;
						}
					}
				}
			}

			&[data-depth] .ui-sortable-helper {
				> .tree-row > .content > .margin-lvl {
					flex: 0 0 15px;
				}

				@for $i from 1 through $max_depth - 1 {
					$class_tree_list: '.tree-list';
					@for $j from 1 through $i {
						@if $j != 1 {
							$class_tree_list: $class_tree_list + ' .tree-list';
						}
					}
					#{$class_tree_list} > li > .tree-row > .content > .margin-lvl {
						flex: 0 0 ($i * 15px + 15px);
					}
				}
			}
		}

		.tree-item {
			> .tree-row {
				width: 100%;
				min-width: 320px;
				border-bottom: 1px solid $table-border-color;
				padding: 8px 0;

				&:hover {
					background-color: $ui-hover-color;
				}

				> .problem-icon-list {
					float: right;
					padding-left: 10px;
					margin-right: 10px;
				}

				> .tools {
					float: right;
					position: relative;
					padding-left: 10px;
					margin-right: 10px;
					display: flex;
					width: 85px;

					.edit-item-btn,
					.remove-item-btn,
					.import-items-btn,
					.add-child-btn {
						margin-left: 5px;
						cursor: pointer;
						border: 0;
						opacity: .5;
						float: left;

						&::-moz-focus-inner {
							padding: 0;
						}
					}
					.edit-item-btn:hover,
					.remove-item-btn:hover,
					.import-items-btn:hover,
					.add-child-btn:hover {
						opacity: 1;
					}
					.edit-item-btn:focus,
					.remove-item-btn:focus,
					.import-items-btn:focus,
					.add-child-btn:focus {
						opacity: 1;
						outline: none;
					}
					.add-child-btn {
						background: url($sprite-path) no-repeat -47px -551px;
						background-color: $transparent !important;
						height: 15px;
						width: 14px;
					}
					.edit-item-btn {
						background: url($sprite-path) no-repeat -47px -478px;
						background-color: $transparent !important;
						height: 15px;
						width: 14px;
					}
					.import-items-btn {
						background: url($sprite-path) no-repeat -47px -515px;
						background-color: $transparent !important;
						height: 15px;
						width: 14px;
					}
					.remove-btn {
						position: relative;
						margin-left: 10px;
						top: 0;
					}
				}

				> .content {
					display: flex;
					height: 20px;

					> .arrow {
						flex: 0 0 15px;
						text-align: center;
						margin: 2px 2px 0 -5px;

						> .treeview {
							display: none;
						}
					}

					> .drag-icon {
						min-width: 24px;
					}

					> .item-name {
						flex: 0 1 auto;
						white-space: nowrap;
						overflow: hidden;
						margin-right: 5px;
						text-overflow: ellipsis;
						line-height: 1.5;
					}
				}
			}

			&.is-parent {
				> .tree-row {
					> .content {
						> .arrow {
							> .treeview {
								display: block;
							}
						}
					}
				}
			}

			&.selected {
				> .tree-row {
					@extend %found-bg;

					&:hover {
						@extend %found-bg;
					}
				}
			}

			&.no-map,
			&.inaccessible {
				> .tree-row {
					> .content {
						> .item-name {
							color: $form-border-color;
						}
					}
				}
			}

			&.ui-sortable-helper {
				background: $ui-sortable-helper-background-color;
				border-color: $ui-sortable-helper-border-color;
				border-width: 1px;
				border-style: solid;

				.tools {
					display: none;
				}
			}

			&.opened > ul {
				display: block;
			}

			&.closed > ul {
				display: none;
			}

			.sortable-error {
				border-color: transparent;
				background: rgba($red, .2);
			}
		}

		.highlighted-parent > .tree-row {
			background: $ui-highlighted-parent-background-color;
		}

		.placeholder {
			background-color: $ui-placeholder-background-color;
			animation: fadein .5s;
		}
	}

	.problem-icon-list {
		flex-wrap: nowrap;
	}
}

.problem-icon-list {
	display: flex;
	flex-wrap: wrap;

	.problem-icon-list-item {
		border-radius: 3px;
		color: $btn-font-color;
		display: inline-block;
		flex: 0 0 7px;
		font-size: 12px;
		line-height: 1;
		padding: 3px 4px 2px;
		margin: 1px 0;

		&:not(:last-of-type) {
			margin-right: 5px;
		}
	}
}

:-ms-input-placeholder {
	color: $input-placeholder-color !important;
}

::-ms-input-placeholder {
	color: $input-placeholder-color;
}

::placeholder {
	color: $input-placeholder-color;
}

.icon-action-command,
.icon-action-close,
.icon-action-msg,
.icon-action-msgs,
.icon-action-severity-up,
.icon-action-severity-down,
.icon-action-severity-changed,
.icon-action-message,
.icon-action-ack,
.icon-action-unack,
.icon-invisible,
.icon-problem-generated,
.icon-problem-recovery,
.icon-actions-number-gray,
.icon-actions-number-yellow,
.icon-actions-number-red,
.icon-description {
	display: inline-block;
	position: relative;
	height: 18px;
	width: 18px;
	margin: 0 5px 0 0;
	top: 0;
	bottom: 0;
	vertical-align: bottom;

	&::before {
		content: '';
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 18px;
		height: 18px;
		background-image: url($sprite-path);
		background-repeat: no-repeat;
	}
}

[data-count][class*='icon-']::after,
.icon-description::after {
	position: absolute;
	content: attr(data-count);
	text-align: center;
	margin-top: -2px;
	font-size: 9px;
	letter-spacing: -.25px;
	width: 18px;
}

.icon-action-command::before {
	background-position: -249px -245px;
}

.icon-action-close::before {
	background-position: -224px -245px;
}

.icon-action-msg::before {
	background-position: -299px -245px;
}

.icon-action-severity-up::before {
	background-position: -349px -245px;
}

.icon-action-severity-down::before {
	background-position: -374px -245px;
}

.icon-action-severity-changed::before {
	background-position: -399px -245px;
}

.icon-action-message::before {
	background-position: -199px -245px;
}

.icon-action-ack::before {
	background-position: -323px -245px;
}

.icon-action-unack::before {
	background-position: -173px -245px;
}

.icon-invisible::before {
	background-position: -89px -803px;
}

.icon-problem-generated::before {
	background-position: -449px -245px;
}

.icon-problem-recovery::before {
	background-position: -424px -245px;
}

.icon-action-msgs {
	&[data-count]::after {
		color: $ui-bg-color;
	}

	&::before {
		background-position: -474px -245px;
	}
}

.icon-actions-number-gray {
	&[data-count]::after {
		color: $font-color;
	}

	&::before {
		background-position: -499px -245px;
	}
}

.icon-actions-number-yellow {
	&[data-count]::after {
		color: $font-color;
	}

	&::before {
		background-position: -549px -245px;
	}
}

.icon-actions-number-red {
	&[data-count]::after {
		color: $font-color;
	}

	&::before {
		background-position: -524px -245px;
	}
}

.icon-description {
	margin: 0 0 0 5px;

	&::after {
		content: '?';
		color: $ui-bg-color;
	}

	&::before {
		background-position: -474px -245px;
	}
}

#expressions_list .ui-sortable-helper {
	display: table;
}

// Range control.
$range-track-color: #c0c0c0;
$range-progress-color: $link-color;
$range-thumb-color: $link-color;
$range-thumb-color-focus: $link-active-color;
$range-progress-color-focus: $link-active-color;
$range-thumb-size: 10px;
$range-track-height: 2px;
$range-input-width: 31px;

.range-control {
	position: relative;
	display: inline-block;
	vertical-align: middle;

	input[type=range] {
		cursor: pointer;
		-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
		-moz-appearance: none; /* Hides the slider so that custom slider can be made */
		width: calc(100% + 10px);
		opacity: 0;
		vertical-align: middle;
		margin: 0 -5px;
		padding: 0;
		height: 20px;

		&:focus {
			outline: none;
		}

		/* Special styling for WebKit/Blink */
		&::-webkit-slider-thumb {
			margin-top: 1px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
			height: $range-thumb-size;
			width: $range-thumb-size;
			opacity: 0;
		}

		&::-webkit-slider-runnable-track {
			height: $range-thumb-size;
			opacity: 0;
		}
	}

	input[type=text] {
		width: $range-input-width;
		float: right;
	}

	> div {
		position: relative;
		width: calc(100% - 10px - #{$range-input-width});
		margin: 2px $range-thumb-size 0 0;
		float: left;
	}

	.range-control-track,
	.range-control-progress {
		position: absolute;
		top: 50%;
		margin-top: -$range-track-height / 2;
		left: 0;
		height: $range-track-height;
		cursor: pointer;
	}

	.range-control-track {
		width: 100%;
		background: $range-track-color;
	}

	.range-control-progress {
		background: $range-progress-color;
	}

	.range-control-thumb {
		position: absolute;
		top: 50%;
		margin-top: -$range-thumb-size / 2;
		margin-left: -$range-thumb-size / 2;
		width: $range-thumb-size;
		height: $range-thumb-size;
		border-radius: 50%;
		background: $range-thumb-color;
	}

	&.range-control-focus {
		.range-control-thumb {
			margin-top: -$range-thumb-size / 1.5;
			margin-left: -$range-thumb-size / 1.5;
			background: $range-thumb-color-focus;
			border: 2px solid lighten($btn-bg-color, 10%);
		}

		.range-control-progress {
			background: $range-progress-color-focus;
		}
	}

	&.disabled {
		opacity: 1;

		input[type=range] {
			cursor: default;
		}
		.range-control-progress,
		.range-control-thumb {
			background: #c0c0c0;
		}
	}

	datalist {
		position: absolute;
		display: flex;
		width: 100%;
		top: 50%;
		margin-top: -$range-track-height / 2;

		option {
			padding: 0;
			font-size: 0;
			flex: 1 0 0;
			height: $range-track-height;
			border-left: 1px solid $body-bg-color;
		}
	}
}

.graph-legend {
	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.graph-widget-config-tabs {
	padding: 10px 0;

	> .tabs-nav {
		padding-left: calc(15% + 10px);
		margin-right: 0;
		margin-left: 0;
	}
}

// Screen reader.
.inline-sr-only {
	font-size: 0;
}

.item-test-popup-value-row,
.preproc-test-popup-value-row {
	display: flex;

	label {
		padding: 0 10px;
		margin-left: auto;
		line-height: 24px;
	}
}

table.preprocessing-test-results {
	td {
		vertical-align: top !important;
	}

	.rel-container {
		top: 4px;
		margin-left: 3px;
	}
}

#preprocessing-test-form {
	.table-forms-separator {
		margin-top: -2px;
	}
}

.totals-list {
	&:not(.list-table) {
		display: flex;
		height: 100%;
	}

	> div {
		flex: 1;
		align-items: center;
		display: flex;
		line-height: 18px;
		overflow: hidden;
		padding: 0 10px;
		position: relative;
	}

	.count {
		font-size: 16px;
	}

	&.totals-list-horizontal {
		> div {
			flex-direction: column;
			justify-content: center;
			min-width: 55px;
			text-align: center;
		}
	}

	&.totals-list-vertical {
		flex-direction: column;

		> div {
			min-height: 21px;
			padding-top: 3px;
		}

		.count {
			margin-right: 5px;
		}
	}
}

// Widget "Host availability".
.host-avail-widget {
	td:not(:first-child) {
		border-left: 1px dotted $table-border-color;

	}

	.host-avail-true {
		background: $host-avail-true-bg-color;
	}

	.host-avail-false {
		background: $host-avail-false-bg-color;
	}

	.host-avail-unknown {
		background: $host-avail-unknown-bg-color;
	}

	.host-avail-total {
		background: $host-avail-total-bg-color;
	}
}

// Input group

.input-group {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;

	* {
		box-sizing: border-box;
	}

	input,
	textarea {
		flex: 1;
		border-right: 0;

		&:focus,
		&:active {
			+ .btn-undo {
				border-top-color: $form-border-focus-color;
				border-bottom-color: $form-border-focus-color;
			}
		}
	}

	button {
		position: relative;

		&.btn-change {
			border-radius: 0;

			&:disabled {
				display: none;
			}
		}

		&.btn-undo {
			display: none;
			width: 24px;
			border-left: 0;
			border-right: 0;
			border-top: 1px solid $form-border-color;
			border-bottom: 1px solid $form-border-color;
			border-radius: 0;
			background-color: $form-bg-color;
			transition: border-color .2s ease-out, box-shadow .2s ease-out;

			&::before {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 22px;
				height: 22px;
				content: '';
				background: url($sprite-path) no-repeat -119px -474px;
			}

			&.is-focused {
				border-top: 1px solid $form-border-focus-color;
				border-bottom: 1px solid $form-border-focus-color;
			}

			&:hover,
			&:focus,
			&:active {
				border-top: 1px solid $form-border-focus-color;
				border-bottom: 1px solid $form-border-focus-color;
				@include btn-hover-active($btn-font-color, $btn-bg-color);

				&::before {
					background-position: -431px -474px;
				}
			}
		}

		&.btn-dropdown-toggle {
			border-color: $form-border-focus-color;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;

			&:disabled {
				@extend %form-disabled;
			}
		}
	}
}

.input-secret {
	position: relative;
	display: flex;
	flex: 1;

	input {
		flex: 1;
	}

	button {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;

		&:enabled {
			&:hover,
			&:focus,
			&:active {
				opacity: 1;
				animation: fadein .2s;
			}
		}
	}
}

// Dropdown

.btn-dropdown-container {
	display: flex;
}

.icon-text {
	&::before {
		background: url($sprite-path) no-repeat -87px -474px;
	}

	&:not(.highlighted):enabled {
		&:hover,
		&:focus,
		&:active,
		&[aria-expanded="true"] {
			&::before {
				background-position: -399px -474px;
			}
		}
	}
}

.icon-secret {
	&::before {
		background: url($sprite-path) no-repeat -87px -510px;
	}

	&:not(.highlighted):enabled {
		&:hover,
		&:focus,
		&:active,
		&[aria-expanded="true"] {
			&::before {
				background-position: -399px -510px;
			}
		}
	}
}

.btn-dropdown-toggle {
	white-space: nowrap;
	overflow: hidden;
	text-indent: -200px;

	&[class*='icon-'] {
		padding-left: 22px;

		&::before {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 22px;
			height: 22px;
			content: '';
		}
	}

	&::after {
		position: absolute;
		top: 6px;
		right: 2px;
		width: 10px;
		height: 10px;
		content: '';
		background: url($sprite-path) no-repeat -547px -431px;
	}

	&:enabled {
		&:hover,
		&:focus,
		&:active {
			&::after {
				background-position: -604px -431px;
			}
		}
	}

	&[aria-expanded="true"] {
		@include btn-hover-active($btn-font-color, $btn-bg-color);

		&::after {
			background: url($sprite-path) no-repeat -604px -503px;
		}

		&:hover,
		&:focus,
		&:active {
			&::after {
				background: url($sprite-path) no-repeat -604px -503px;
			}
		}
	}
}

// Macros mass update tab.

.checkbox-block {
	display: none;
	margin: 10px 0;
}

#tbl_macros.massupdate-remove {
	th,
	td {
		display: none;
	}

	th:nth-child(1),
	td:nth-child(1),
	td.nowrap {
		display: table-cell;
	}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	/* for IE11 only. Fixed cell height if table has 100% height */
	.host-avail-widget {
		td {
			height: 100%;
		}
	}
}

// HOST INTERFACES

.interface-container {
	width: fit-content;
	width: -moz-fit-content;
	padding-left: 0;

	&:not(.interface-container-header):not(:empty) {
		margin-bottom: 5px;

		& ~ .interface-container:not(:empty) {
			border-top: 1px solid $form-border-color;
			padding-top: 10px;
		}
	}

	&:empty {
		display: none;
	}

	.interface-row {
		display: grid;
		grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr;
		grid-template-rows: 24px 1fr;
		gap: 5px;

		&:not(:first-of-type) {
			margin-top: 5px;
		}

		&[data-type] .interface-cell-details {
			display: none;
		}

		.interface-cell {
			align-self: center;

			.interface-btn-toggle {
				display: none;
				@extend .btn-link;
			}

			&.interface-cell-header {
				color: $font-alt-color;
				text-align: left;
			}

			.table-forms-td-left,
			.table-forms-td-right {
				padding-bottom: 0;
			}
		}
	}
}

// Host interface accordion for SNMP specific styles.
.interface-row.list-accordion-item[data-type="2"] {
	&.list-accordion-item-closed {
		.interface-btn-toggle {
			@extend .btn-widget-expand;
		}

		.list-accordion-item-body {
			display: none;
		}
	}

	&.list-accordion-item-opened {
		.interface-btn-toggle {
			@extend .btn-widget-collapse;
		}

		.list-accordion-item-body {
			display: block;
		}
	}

	.interface-btn-toggle {
		display: inline-block;
		@extend %btn-widget;
	}
}

// Media type test log popup
#mediatype_testlog {
	.logitems {
		overflow: auto;
		margin-bottom: 10px;

		pre {
			white-space: nowrap;
		}
	}

	.logtotalms {
		margin-bottom: 10px;
	}
}
